Как сделать резиновый текст в css
Перейти к содержимому

Как сделать резиновый текст в css

  • автор:

Адаптивный шрифт

Хорошая идея — сделать шрифт, который сам меняет свой размер в зависимости от размера экрана.

Итак, основная идея заключается в использовании font-size: calc совместно с 100vw (шириной экрана) Пример кода:

.text < color: red; font-size: calc(20px + 10 * (100vw / 1200)); >@media (max-width: 767px) < .text < font-size: calc(20px + (10 + 10 * 0.7) * ((100vw - 320px) / 1200)); >>
  • 20px — минимальный размер шрифта (например, для экранов с шириной 320px).
  • 10 — это вычисляемое число. Получается вычитанием из максимального размера шрифта минимальный. Т.е. если на разрешении 1200px размер шрифта должен быть 30, то считаем так: 30 — 20 = 10
  • 1200 — ширина области контента в макете.
  • (10 + 10 * 0.7) — для экраном менее 767px, формула расчета усложняется.
  • 320px — минимальный размер экрана под который верстаем.

Если интересно, то можно посмотреть Демо

Пометки: Отзывчивый / «резиновый» шрифта на CSS

Резиновый шаблон

Чтобы сделать резиновый шаблон, вам нужно изменить единицы измерения ширины у селекторов #leftcol и #rightcol , а именно, вместо пикселей установить проценты. А для селектора #wrap указать минимальную ширину min-width , при которой будет появляться горизонтальная полоса прокрутки. Например, возьмем фиксированный шаблон с тремя колонками, в файле style.css укажем следующие свойства для селектора #wrap :

#wrap

И для боковых колонок вместо 180px установим ширину, равную 20% .

#leftcol < width: 20%; float: left; >#rightcol

Посмотреть примеры для резинового шаблона можно, перейдя ссылкам:

  • Резиновый шаблон с одной колонкой;
  • Резиновый шаблон с двумя колонками;
  • Резиновый шаблон с двумя колонками (узкая колонка справа);
  • Резиновый шаблон с тремя колонками.

Все шаблоны для фиксированного макета находятся в папке fix, для резинового макета в папке float данного учебника.

Как задать размер шрифта с помощью css свойства font-size

Чтобы задать размер шрифта на сайте с помощью css, необходимо у нужного элемента прописать свойство font-size. При этом размер шрифта можно указать несколькими способами:

h1 <
font-size:20px
>

2 Размер шрифта с помощью свойств small, medium и large (маленький, средний, большой).А так же x-small и xx-small ( очень-маленький ) , x-large и xx-large (очень большой)

h1 <
font-size:small;
>

3 Так же можно задать размер шрифта в процентах (процент берется относительно родительского элемента):

Пример


h1 <
font-size: 150%;
>

Здесь размер заголовка будет равен 150% от 20px, т. е. 30px.

4 Вычисляемый размер шрифта:

h1 <
font-size: calc(2em + 2%);
>

5 Размер в относительных единицах. Как и у процентов, размер берется относительно родительского элемента:

Пример


h1 <
font-size: 2em;
>

Здесь размер шрифта заголовка css будет равен 60px

6 Размер в типографских пунктах. 1 пункт = 4/3px.

h1 <
font-size: 20pt;
>

Как сделать шрифт «резиновым» (адаптивным)?

Чтобы адаптировать шрифт под размеры экрана различных мобильных устройств, можно воспользоваться несколькими способами:

7 Задать кегль шрифта с помощью медиазапросов:

h1 <
font-size: 40px;
>
@media (min-width:1500px) <
h1 <
font-size: 60px;
>
>
@media (max-width:600px) <
h1 <
font-size: 20px;
>
>

Здесь при разрешении экрана больше 1500px шрифт увеличится с 40 пикселей до 60, а при разрешении меньше 600px уменьшится до 20 пикселей.

Как сделать сайт адаптивным и больше о медиазапросах можно прочитать здесь.

8 Задать размер шрифта через css в относительных единицах vw и vh относительно ширины и высоты окна браузера.

h1 <
font-size: 3vw;
>

Здесь 3 — это 3% от ширины экрана, Т. е. при разрешении 1200px размер шрифта будет равен 36px и на экранах с более низким разрешением будет пропорционально уменьшаться.

Как подключить шрифт к сайту можно прочитать здесь.

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

Адаптивный или отзывчивый шрифт — это мечта любого веб-разработчика. Я пересмотрел множество вариантов реализации, посидел вечерок и вывел для себя надежный работающий вариант. Им и хочу с тобой поделиться. Бонус 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) / #)); > 

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *