Как сделать чтобы шрифт уменьшался от размеров экрана css
Перейти к содержимому

Как сделать чтобы шрифт уменьшался от размеров экрана css

  • автор:

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

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

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

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

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

Размер текста

Для педагогов

Современная образовательная парадигма, ратифицируя приоритет личностной ориентации педагогического процесса, в ходе которого осуществляется развитие природных задатков, заложенных в каждом индивидууме, требует переосмысления существующих традиционных форм и методов общеобязательного образования.

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

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

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

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

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

Использование функции clamp()

Функция clamp() устанавливает рекомендованное, минимальное и максимальное значения для какого-либо свойства, в частности, font-size . Это позволяет задать диапазон, в котором будет меняться размер нашего текста. К примеру, следующая запись говорит, что текст абзаца не должен быть меньше 0.75rem, не должен быть больше 2rem, а лучше, если он будет 1rem.

Чтобы размер шрифта плавно менялся вместе с шириной окна, рекомендованное значение следует дополнить единицами vw.

Онлайновый сервис Font-size Clamp Generator позволяет получить параметры clamp() на основе минимальной и максимальной ширины области просмотра (рис. 3).

Рис. 3. Генератор параметров функции clamp()

В примере 3 функция clamp() применяется для заголовка и основного текста.

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

Размер текста section h2 < font-size: clamp(2rem, 0.5rem + 4vw, 4rem); >section div

Для педагогов

Современная образовательная парадигма, ратифицируя приоритет личностной ориентации педагогического процесса, в ходе которого осуществляется развитие природных задатков, заложенных в каждом индивидууме, требует переосмысления существующих традиционных форм и методов общеобязательного образования.

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

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

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

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

Размер текста

Для педагогов

Современная образовательная парадигма, ратифицируя приоритет личностной ориентации педагогического процесса, в ходе которого осуществляется развитие природных задатков, заложенных в каждом индивидууме, требует переосмысления существующих традиционных форм и методов общеобязательного образования.

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

См. также

  • @media
  • font-size
  • Единицы размера в CSS
  • Размер текста
  • Свойства шрифта в CSS
  • Функция calc()
  • Функция clamp()
  • Функция max()
  • Функция min()

Как изменять размер шрифта в зависимости от размера экрана?

Всем здравствуйте!
Подскажите пожалуйста, как изящно сделать изменение шрифта для различного размера экрана?
Например:
Есть заголовок

Blabla

— на экране десктопа он выглядит вполне достойно при размере в 36px, но на телефоне он уже с трудом входит в экран (условно). Если же поставить размер в зависимость от % или от ширины vw, то из-за линейной зависимости на телефоне будет практически ничего не видно.
Гугл подсказывает, что можно в @media ставить конкретные значения (не плохой вариант) или использовать JS чтобы подгонять размер по месту.
То же касается отступов сверху, снизу.
Как вы считаете это можно сделать наиболее красиво?
Спасибо!

  • Вопрос задан более трёх лет назад
  • 45095 просмотров

Комментировать
Решения вопроса 1
Павел Радьков @paulradzkov
Дизайнер, верстальщик, начальник отдела UI

Можно поставить размер шрифта в зависимости от размеров экрана, но через calc() задавать минимальное значение.

В этом примере ( codepen.io/paulradzkov/pen/jqYqgY ) размер шрифта заголовка никогда не будет меньше 16px (1em):

Можно использовать более сложные формулы совместно с @media . Тут размер шрифта плавно меняется от 14 до 18px в диапазоне от 480 до 1024px.

@media (min-width: 480px) and (max-width: 1024px) < p < font-size: calc(14px + (18 - 14) * ( (100vw - 480px) / ( 1024 - 480) )); >>

До 480 и после 1024px размер задан жестко с использованием @media .

Но в целом это все сложно и редко нужно. Я обычно задаю размер фиксированно на двух-трёх диапазонах при помощи @media .

UPD: можно даже заставить текст максимально заполнять площадь вьюпорта codepen.io/CrocoDillon/pen/fBJxu

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

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

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

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

В нем написан текст размером в 28 пикселей в одну строчку. Необходимо сделать так, чтобы при уменьшении экрана также вместе с резиновым блоком уменьшался бы размер шрифта, при этом текст также должен быть написан в одну строчку. Ссылка на jsfiddle. Если это невозможно реализовать через обычный html и css то прошу помочь небольшим js скриптом. Прошу вашей помощи в реализации данного вопроса.

Отслеживать
5,756 3 3 золотых знака 23 23 серебряных знака 44 44 бронзовых знака
задан 2 июл 2014 в 21:55
159 1 1 золотой знак 2 2 серебряных знака 18 18 бронзовых знаков

вы конечно уже выбрали лучший ответ , но вот пример jsfiddle.net/ubhqwzb3 смотрите — сколько кода лишнего в примерах ниже

17 янв 2016 в 2:32

4 ответа 4

Сортировка: Сброс на вариант по умолчанию

Вариант еще проще я встретил вот здесь: Можно ли сделать резиновый шрифт в css?

.connect p < font-size: 3vw; /* 3% of viewport width */ >

Отслеживать
ответ дан 29 апр 2017 в 17:13
Петр Варягин Петр Варягин
410 1 1 золотой знак 4 4 серебряных знака 13 13 бронзовых знаков

Это возможно сделать средствами css. Демонстрация работы

 

Небольшой текст написанный в одну строчку

@media screen and (min-width: 700px) < .connect p < font-size: 28px; >> @media screen and (min-width: 600px) and (max-width: 699px) < .connect p < font-size: 25px; >> @media screen and (min-width: 500px) and (max-width: 599px) < .connect p < font-size: 21px; >> @media screen and (min-width: 300px) and (max-width: 499px) < .connect p < font-size: 14px; >> 

Отслеживать
ответ дан 3 июл 2014 в 5:44
19.9k 5 5 золотых знаков 44 44 серебряных знака 61 61 бронзовый знак

$(window).resize(function()< var text = $(".connect p"), currentWidth = parseInt(text.css("width")), newWidth = 28; if(currentWidth==700) newWidth = 28; else if (currentWidth=600) newWidth = 25; else if (currentWidth=500) newWidth = 21; else if (currentWidth=300) newWidth = 16; text.css("font-size",newWidth+"px"); >); 

Правда вам надо будет придумать, как вычислить эти самые новые пиксели. Ведь разные шрифты имеют разный размер букв и надо тогда считать количество символов, считать ширину строки из них и подгонять под них размер шрифта.

Отслеживать
5,756 3 3 золотых знака 23 23 серебряных знака 44 44 бронзовых знака
ответ дан 2 июл 2014 в 23:26
Alex Krass Alex Krass
17.8k 2 2 золотых знака 25 25 серебряных знаков 52 52 бронзовых знака
Небольшой upgrade и теперь текст, сразу при загрузке страницы, идет в одну строку.
3 июл 2014 в 0:58

@Alex Krass, спасибо огромное за помощь, но вот скажите, возможно ли через javascript реализовать следующее: Есть разрешения экрана с 1280px до 760 необходимо чтобы каждые 20 пикселей изменения размера экрана также менялся размер текста на 0.5px На вашем примере надо прописывать каждый промежуток: else if (currentWidth<700 && currentWidth>=680) newWidth = 25; else if (currentWidth=660) newWidth = 24.5; и т.д. Возможно ли это как то сделать циклом? Я в javascript вообще 0 🙁 Прошу вашей помощи. Заранее спасибо!

3 июл 2014 в 10:29

@KeH192, можно вывести зависимость и от нее считать: jsfiddle.net/cL8je/1 newFontSize = newFontSize — ((maxWidth — currentWidth)/20)*0.5;

3 июл 2014 в 16:19

@Alex Krass, благодарю, но почему то при интеграции данного скрипта получилось вот такое: filebeam.com/2e5b750003292de40369efc42aa998c2.jpg У меня файл стилей подключен в другом файле. Скрипт вставил в шапку. Но почему то он посчитал все в 2.9 пикселя 🙂

3 июл 2014 в 21:05

@KeH192, данный форум больше рассчитан на помощь, с расчетом на то, что по примеру человек сам сможет адаптировать скрипт под свои нужды. Как Вы выразились, Вы в javascript вообще 0, поэтому наверно не понимаете, как он работает. В данном случае указаны min- и max-width на основе которых он считает(у вас их нет). Если брать экран, то надо его значения подставлять, просто так использовать данный скрипт под другую задачу не получится, надо его адаптировать. Для экрана так: jsfiddle.net/x7UgP И скрипт все равно еще не идеален и может Вам не подойти без дальнейшего усовершенствования.

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

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