Адаптивный шрифт с помощью функции calc() CSS || Fluid Font Size - calc() function CSS

Всем привет!

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

Итак, давайте посмотрим.

У нас есть заголовок первого типа и у него размер шрифта равен 100 пикселям.

Также у нас есть параграф с произвольным текстом, у него размер шрифта равен 30 пикселям.

Давайте нажмем посмотреть код и начнем сужать ширину области просмотра.

И мы видим, как наш заголовок и параграф уменьшаются.

При сужении ширины области просмотра текст адаптируется под эту ширину.

Давайте уменьшим еще меньше.

Видим, что при ширине 272 пикселя у нас Shift выглядит вот таким маленьким.

Расширяем.

Видим, как он также адаптируется и подстраивается.

И в этом видео вы узнаете, как сделать такой вот адаптивный шрифт, используя HTML и CSS шаг за шагом.

Итак, приступим к добавлению адаптивного шрифта на страницу.

У нас есть файл index.html, style.css, стили подключены.

И внутри body давайте создадим заголовок первого типа, дадим ему название класса title и туда укажем, допустим,

какой-то произвольный текст и также давайте добавим параграф также с произвольным текстом например на 50 слов давайте откроем страницу и смотрим что у нас добавилось и так мы видим есть заголовок первого типа есть произвольный текст давайте свернем браузер в половину и немного стилизуем эти элементы

Здесь обратимся к универсальному селектору, вернули Imagine, Padding и добавим свойство Box-Sizing Border Box.

Теперь обратимся к селектору PegaBody.

У него укажем ширина 100%, минимальная высота будет 100, минимальная высота 100, VH.

Background будет черного цвета, цвет текста будет у нас белый.

и давайте сделаем размещение этих элементов по центру укажем display-flex justify-content-center align-items также будет центр flex-direction укажем колонн чтобы они размещались в колонку и также сделаем между ними отступы gap на 5 ram теперь давайте обратимся к заголовку первого типа с классом title для него укажем font-size 100px

И также обратимся к параграфу и для него укажем font-size 30px.

Теперь давайте откроем страницу.

Здесь еще для параграфа нам нужно добавить text-align-justify, выравнивание равномерное.

Также добавим padding, укажем отступы со всех сторон на 3%.

И также давайте укажем максимальная ширина, будет 80рм для параграфа.

Итак, открываем страницу, видим, у нас есть результат, есть заголовок, есть произвольный текст, параграф наш.

Давайте теперь нажмем посмотреть код и посмотрим, что у нас будет меняться.

Итак, сужаем ширину области просмотра.

И как мы видим, только строки перемещаются, но текст не адаптируется под ширину области просмотра.

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

И для этого мы будем использовать функцию calc, свойство font-size и функцию calc.

Давайте изначально изучим синтаксис, а затем добавим применение для заголовка первого типа и параграфа.

Итак, синтаксис у нас будет следующий.

Мы добавляем свойство font-size.

формула будет большой на первый взгляд страшной но мы ее разберем и все я надеюсь будет понятно итак добавляем свойства font-size затем добавляем функцию calc и внутри нам нужно добавить изначально минимум size то есть это будет минимальный размер плюс сюда

в дужках мы указываем максимум size максимальный размер минус минимальный размер затем у нас идет умножение на 100 bw минус минимальный

минимальная ширина области просмотра запишем minimum viewport size затем нам нужно это все поделить на максимальную ширину области просмотра maximum viewport size и также нужно нам отсюда

отнять минимальную ширину области просмотра скопируем ставим сюда и поставим здесь точку запятой такая вот у нас идет формула такой вот синтаксис и так давайте здесь разберем минимум сайт

Минимум Size это у нас минимальный размер шрифта, который мы хотим видеть.

Минимальный размер шрифта.

Затем Maximum Size это соответственно максимальный размер шрифта, который может применяться к элементу.

так затем мы используем это 100 vw получается это стопроцентная ширина области просмотра то есть к ширине области просмотра это присваивается и здесь у нас идет

minimum viewport size мы указываем минимальный минимальную ширину области просмотра также давайте запишем минимальная ширина области просмотра и также у нас еще есть максимум viewport size это у нас соответственно

Давайте отсюда также скопируем, чтобы долго не прописывать.

И укажем максимальная ширина области просмотра.

Так, это наш синтаксис, это наша формула.

И вот объяснение каждому из этих элементов.

Но опять же, это может быть все не так просто.

Давайте лучше это все рассмотрим на примере.

То есть мы, используя единицы просмотра,

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

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

например то есть если мы хотим чтобы размер шрифта находился в диапазоне где 26 пикселей это минимальный размер при на меньшей ширине области просмотра в 300 пикселей и где 100 пикселей это максимальный размер при самой большой ширине области просмотра допустим 1600 пикселей тогда наше уравнение может выглядеть следующим образом давайте запишем для

заголовка первого типа.

Здесь мы font-size уберем и запишем сначала.

Давайте так.

Font-size.

Мы указываем свойство font-size и внутри добавляем функцию calc.

Туда мы указываем, согласно нашей формуле, минимальный размер, который мы хотим видеть.

Допустим, это 26 пикселей.

Затем мы добавляем

Ставим плюс.

И в дужках указываем уже максимальный размер.

Он может быть допустим 100.

Как мы указывали, что для нашего заголовка он был 100.

100 пикселей минус минимальный размер.

То есть 100 минус 26.

Затем здесь мы умножаем и в дужках

Также указываем 100 VW, ширина области просмотра 100, минус 300 пикселей.

300 пикселей это у нас идет, как здесь указано, 100 VW, минимальная ширина области просмотра.

Допустим, при условии, что ширина области просмотра идет минимальная 300.

Мы можем указать 450, 500 и так далее.

Все это уже индивидуально зависит от ваших размеров.

Затем здесь мы указываем разделить на.

И указываем максимальную ширину области просмотра.

Допустим 1600 пикселей.

И минус 300.

Минус минимальную ширину области просмотра.

Согласно формуле.

Давайте еще раз пройдемся.

Мы добавляем размер шрифта.

Функцию calc.

Здесь у нас идет минимальный размер шрифта плюс максимальный размер шрифта минус минимальный.

Умножаем на ширину области просмотра минус минимальную ширину области просмотра и делим на максимальную ширину области просмотра минус 300 пикселей.

Это минимальная ширина области просмотра.

Опять же, вот эти значения, размер шрифта,

ширина области просмотра минимальная и максимальная уже это можете сами подбирать то есть сейчас в примере идет так то есть у нас минимальная 300 пикселей максимальная 1600 теперь давайте откроем страницу видим shift у нас увеличился сейчас он равен у нас при условии что ширина у нас 1600 пикселей равен у нас 100 пикселей минус 26 соответственно теперь давайте нажмем посмотреть

и начнем сужать ширину области просмотра и как мы видим наш заголовок первого типа он у нас адаптируется и он у нас будет адаптироваться до минимальной соответственно ширины области просмотра до 300 пикселей да он достигнет ширины меньше чем 300 и меньше то у него размер шрифта будет соответственно 26 пикселей как мы указывали

есть минимальный размер давайте например расширим и изменим здесь данные видим сворачиваем даже браузер есть и текст у нас адаптируется давайте здесь укажем допустим 35 пикселей здесь укажем 150 еще больше сделаем и здесь также 35

Ширина минимальная и максимальная останется такой же.

Давайте расширим.

Видим большой у нас текст.

Начнем сужать.

И видим, что текст у нас адаптируется опять же под ширину области просмотра.

Очень легко и просто по сути.

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

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

Давайте теперь еще сделаем адаптивным наш параграф.

Опять же сюда.

Для параграфа font-size 30 пикселей уберем и добавим функцию calc.

И допустим мы хотим, чтобы минимальный размер шифта у нас был 12 пикселей.

Плюс максимальный, чтобы был 30.

30 пикселей минус 12 пикселей укажем.

Затем умножаем на 100 VW ширину области просмотра.

Минус 300 пикселей.

Пиксели это минимальная ширина области просмотра.

И здесь опять же делим допустим на 1600 или давайте укажем 1500.

Минус 300.

Максимальная минус минимальная.

Итак, давайте видим вот у нас текст.

Он у нас идет с размером 30 пикселей минус 12 соответственно.

Давайте также нажмем посмотреть код.

И начнем сужать ширину области просмотра.

И видим, как и заголовок, и текст у нас адаптируется четко под ширину области просмотра.

То есть очень удобно, легко и просто мы можем использовать font-size и функцию calc.

На этом все.

Спасибо за просмотр и успехов в обучении.

Если вам понравился данный видео урок, ставьте лайк и подписывайтесь на мой канал.