Адаптивный текст
Здесь вы узнаете, как сделать адаптивную типографику при помощи CSS.
Привет, мир!
Измените размер окна браузера, чтобы увидеть, как масштабируется текст.
Адаптивный размер шрифта
Размер шрифта можно установить при помощи единиц измерения vw , что означает «ширина области просмотра» (англ. viewport width).
Данный способ позволяет установить, чтобы размер теста следовал за размером окна браузера:
Привет, мир!
Измените размер окна браузера, чтобы увидеть, как масштабируется текст.
Область просмотра или вьюпорт (viewport) – это размер окна браузера. 1vw = 1% ширины области просмотра. Если ширина области просмотра составляет 50см, то 1vw = 0.5см.
Изменение размера шрифта при помощи медиа-запросов
Также для изменения размера шрифта элемента для определенных размеров экрана, можно использовать медиа-запросы.
Изменяемый размер шрифта.
/* Если ширина экрана 601px или больше, задать размер шрифта 80px */ @media screen and (min-width: 601px) < div.example < font-size: 80px; >> /* Если ширина экрана 600px или меньше, задать размер шрифта 30px */ @media screen and (max-width: 600px) < div.example < font-size: 30px; >>
Адаптивный текст
Для 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
Как сделать адаптивный текст 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.
Отзывчивый шрифт. Адаптация текста между макетным и минимальным значениями
Адаптивный или отзывчивый шрифт — это мечта любого веб-разработчика. Я пересмотрел множество вариантов реализации, посидел вечерок и вывел для себя надежный работающий вариант. Им и хочу с тобой поделиться. Бонус 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) / #)); > Буду рад прочесть в комментариях чем еще можно улучшить это решение. Спасибо за внимание!