4

Можно ли на сегодняшний день добиться адаптивности для текста не используя кучу '@media' запросов?

2
  • с какой версии ie требуется поддержка?
    – olegatro
    25 янв 2016 в 17:16
  • С 10, но можно обойтись и без поддержки в ie 25 янв 2016 в 17:17

2 ответа 2

2

Для font-size можно использовать несколько вариантов:

1. Использовать единицу измерения vw.
vw = 1 % от ширины пользовательской части окна браузера.

p {
  font-size: 10vw; // 10% от viewport
}

Поддержка браузеров vw

2. Использовать calc и vw

p {
  font-size: (calc(14px + 2 * ((100vw - 420px) / 860)))
}

Поддержка браузеров calc

Так или иначе нужно будет подбирать нужные размеры.

Так же, можно посмотреть небольшую библиотеку Rucksack, тут как раз используется vw и calc

2
  • А можно ли сделать зависимость от ширины контейнера, а не всего окна просмотра? 25 янв 2016 в 17:43
  • @ИванСмирнов ниже я предложил сделать песочницу, но думаю что решением будет либо через js, либо через @media.
    – olegatro
    25 янв 2016 в 17:48
0

Воспользуйтесь единицей измерения vw

1vw = 1% от viewport width

Пример

h1 {
    font-size: 5.7vw;
}
h2 {
    font-size: 4.0vw;
}
h3 {
    font-size: 2.8vw;
}
p {
    font-size: 2.5vw;
}

Демо https://css-tricks.com/examples/ViewportTypography/

4
  • А кроме этого есть ли еще альтернатива? изменять текст в зависимости от ширины div к сожелению не получается, макет не позволяет сделать аккуратно 25 янв 2016 в 17:28
  • Вам от чего нужно менять?
    – Invision
    25 янв 2016 в 17:29
  • Просто тест должен быть расположен над изображением, и смещаться максимум пикселей на 10, а изображение пришлось задовать тегом img так как нужно наложить тень, было бы через background так там понятно, строю все на сетке bootstrap 3 25 янв 2016 в 17:36
  • @ИванСмирнов будет лучше, если сделаете песочницу и опишите условия.
    – olegatro
    25 янв 2016 в 17:42

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.