Как адаптировать текст в css

Как менять размер текста при изменении размера окна?

Для изменения размера текста веб-страницы совместно с окном браузера есть несколько методов. Рассмотрим наиболее популярные.

Использование единиц vw

Размер текста задаётся с помощью свойства font-size, в качестве значения можно указывать разные единицы — пиксели, пункты, миллиметры и др. Единица vw (от англ. viewport width — ширина области просмотра) соответствует 1% от ширины окна браузера, таким образом, при изменении этой ширины будет меняться и размер текста (пример 1).

Пример 1. Использование vw

Результат данного примера показан на рис. 1.

Рис. 1. а — текст на широком окне; б — текст на узком окне

У единицы vw есть несколько недостатков — главное, что текст уменьшается пропорционально вместе с окном и в какой-то момент становится нечитаемым. Это будет особенно заметно на смартфонах, где ширина экрана меньше ширины мониторов. Чтобы установить минимальный размер текста можно воспользоваться функцией calc(), как показано в примере 2.

Пример 2. Использование calc()

Здесь мы смешиваем разные единицы — для заголовка rem и vw, для основного текста пиксели и vw. Использование calc() гарантирует, что текст не станет меньше указанного значения (для заголовка, к примеру, это 1rem).

Использование медиа-запросов

Поскольку единицы vw завязаны на ширину области просмотра, то при увеличении размера окна увеличивается и размер текста. Иногда требуется сделать наоборот — на маленьких экранах показывать большой текст, а на больших экранах, соответственно, маленький текст. Для этого применяются медиа-запросы, они меняют стиль элементов при определённой ширине окна браузера.

Сперва определяем стиль для больших экранов, затем с помощью конструкции @media screen and (max-width: 1024px) задаём стиль для экранов с шириной до 1024 пикселей. Внутри @media пишется размер текста под этот размер. При желании ниже добавляем ещё несколько @media с разными значениями max-width (пример 3).

Пример 3. Использование @media

Размер текста в данном случае будет меняться не плавно, а ступенчато — при достижении указанной ширины окна размер текста уменьшается или увеличивается.

См. также

• @media
• calc()
• clamp()
• font-size
• Единицы размера в CSS
• Медиа-запросы
• Отзывчивый веб-дизайн
• Размер текста
• Свойства шрифта в CSS

Адаптивный текст

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

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

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

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

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

Отслеживать
ответ дан 25 янв 2016 в 17:38
673 3 3 серебряных знака 10 10 бронзовых знаков
А можно ли сделать зависимость от ширины контейнера, а не всего окна просмотра?
25 янв 2016 в 17:43

@ИванСмирнов ниже я предложил сделать песочницу, но думаю что решением будет либо через js , либо через @media .

25 янв 2016 в 17:48

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

h1 < font-size: 5.7vw; >h2 < font-size: 4.0vw; >h3 < font-size: 2.8vw; >p

Отслеживать
ответ дан 25 янв 2016 в 17:25
3,021 11 11 серебряных знаков 23 23 бронзовых знака

А кроме этого есть ли еще альтернатива? изменять текст в зависимости от ширины div к сожелению не получается, макет не позволяет сделать аккуратно

25 янв 2016 в 17:28
Вам от чего нужно менять?
25 янв 2016 в 17:29

Просто тест должен быть расположен над изображением, и смещаться максимум пикселей на 10, а изображение пришлось задовать тегом img так как нужно наложить тень, было бы через background так там понятно, строю все на сетке bootstrap 3

Отзывчивый шрифт. Адаптация текста между макетным и минимальным значениями

Адаптивный или отзывчивый шрифт — это мечта любого веб-разработчика. Я пересмотрел множество вариантов реализации, посидел вечерок и вывел для себя надежный работающий вариант. Им и хочу с тобой поделиться. Бонус SCSS миксин!

Итак, задача. Указывать значение по макету, а также минимальное значение при котором текст или заголовок хорошо бы смотрелся на мобильных устройствах, например iPhone 5 (320px). При этом шрифт бы адаптировался, увеличиваясь либо уменьшаясь в зависимости от ширины экрана.

Берем исходные значения из макета, к примеру заголовок H1 размером 40px. Так же нам нужна ширина всего полотна макета, к примеру 1280px.

Для получения минимального значения шрифта верстаем заголовок по макету и, с помощью средств разработчика Chrome (F12) выбираем нужный минимальный размер экрана и подбираем размер шрифта меняя значение пока текст не будет выглядеть адекватно. У меня получилось 24px

После этого в CSS, вместо font-size: 40px; пишем следующее.

font-size: calc(24px + 16 * (100vw / 1280)); 

Где 24px это наш минимальный шрифт, 16 – разница между шрифтом по макету 40 и минимальным шрифтом 24 (40-24 = 16). 100vw – это полная текущая ширина вьюпорта (экрана) 1280 – это ширина макета.

Тестируем и получаем отзывчивый шрифт, который полностью соответствует размеру по макету.

Но, на размере в 320px мы не увидим желаемого результата, а именно шрифта размером 24px. Это связано с тем, что мы никак не указали минимальный размер экрана именно в 320px.

Для решения ситуации пишем медиа запрос для 767px, и внутри меняем формулу:

@media (min-width: 767px) < h1 < font-size: calc(24px + (16 + 16 * 0.7) * ((100vw - 320px) / 1280)); >> 

Тут мы отнимаем 320px от полной ширины вьюпорта, а так же к добавочному числу 16 мы прибавляем еще его 70% (16 + 16 * 0.7)

Проверяем и видим полное соответствие поставленной задаче! При этом переход в брейк поинте сделан бесшовно и не заметно!

Конечно же мы можем закрыть все это в SCSS миксин:

$maxWidth: 1280; @mixin adaptiv-font($pcSize, $mobSize) < $addSize: $pcSize - $mobSize; $addMobSize: $addSize + $addSize * 0.7; @media (max-width: 767px) < font-size: calc(#+ # * ((100vw - 320px) / #)); > @media (min-width: 767px) < font-size: calc(#+ # * (100vw / #)); > > 

И подключать следующим образом:

Можно и вовсе избавиться от медиа запроса:

$maxWidth: 1280; @mixin adaptiv-font($pcSize, $mobSize) < $addSize: $pcSize - $mobSize; $maxWidth: $maxWidth - 320; font-size: calc(#+ # * ((100vw - 320px) / #)); > 

Буду рад прочесть в комментариях чем еще можно улучшить это решение. Спасибо за внимание!

Как сделать адаптивный текст css

Для того, что бы размер шрифта масштабировался относительно размеров окна браузера можно использовать специальные еденицы измерения вместо px — vw. 1 vw = 1% от ширины пользовательской части онка браузера.

p  font-size: 10vw; /* 10% от viewport */ > 

Другой способ, когда нам необходимо чтобы масштабирование происходило в определенном диапазоне. Выполняется с помощью функции calc() . Например от 12px до 20px, при изменении размера окна браузера при размере макета сайта в 1200px.

p  font-size:calc(12px + 8 * (100vw - 320px) / 880); > 

Где 12px это наш минимальный шрифт, 8 – разница между минимальным и максимальным размерами шрифта, 100vw – это полная текущая ширина вьюпорта (экрана) 320px – минимальная ширина контейнера сайта, например на мобильном устройстве. 880 — разница между максимальным размером контейнера сайта и минимальным размером контейнера сайта. Т.е. изначальные размеры макета: 880 + 320 = 1200px.