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

Всем привет!

В этом видео вы узнаете, что такое адаптивная типографика и функция Clump.

Итак, у нас есть блок, внутри которого размещается заголовок первого типа, второго типа и параграф.

Давайте теперь нажмем «Посмотреть код» и предварительно выясним, какого размера у нас параграф, заголовок второго типа и заголовок первого типа, то есть узнаем их «Font Size».

Для этого нажмем здесь на стрелочку Select an element и наведем на параграф.

Как видим, у него фонд идет 22 пикселя.

Для заголовка второго типа 33 пикселя, для заголовка первого типа 44 пикселя.

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

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

Давайте зафиксируем.

ширину на 800 пикселей.

И наведем на параграф.

Как мы видим, уже фонд указывает 18 пикселей для параграфа, для заголовка второго типа 27, для заголовка первого типа 36 пикселей.

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

Можем также зафиксировать, к примеру, на 450 пикселей по ширине.

И наведем также на параграф, как видим, уже

Фонт у нас идет 14,5 для параграфа, для заголовка 21,7 и для заголовка первого типа 29.

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

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

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

Итак, приступим к изучению адаптивной типографики и функции Clump.

В нескольких словах расскажу о том, что такое адаптивная типографика.

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

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

Это все можно реализовать с помощью функции Clump без использования медиазапросов.

Итак, что же такое функция Clump и как она работает?

Давайте зафиксируем.

Функция Clump принимает предпочтительное значение и ограничивает его между нижней и верхней границей.

Давайте зафиксируем нашу теорию.

Функция Clump.

принимает предпочтительное значение и ограничивает его между нижней и верхней границей.

Функция clamp принимает три значения, которые разделяются запятыми.

Давайте сюда также запишем.

Функция clamp принимает три значения.

Так, это...

Минимальное значение.

Далее это предпочтительное значение на английском Preferred и максимальное.

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

Допустим, у нас есть элемент.

И функция clamp записывается следующим образом.

Для font-size указываем clamp.

И внутри в дужках

Указываем минимальное значение, запятая, предпочтительное и максимальное.

Это то, что касается синтаксиса.

А теперь давайте отдельно разберем, что такое минимальное значение.

Минимальное значение – это наименьшее значение.

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

Давайте также запишем для теории.

При условии, если предпочтительное значение меньше этого значения,

то будет применяться минимальное значение.

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

Это значение, которое будет использоваться до тех пор,

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

Давайте также запишем.

Это значение, которое будет использоваться до тех пор, пока

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

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

то будет применяться максимальное значение.

Это то, что касается теории.

Давайте ее зафиксируем и рассмотрим все на примере.

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

Здесь внутри body создадим контейнер.

Внутри него будет размещаться div с классом content.

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

Затем будет идти заголовок второго типа с произвольным текстом на 10 слов.

И затем будет идти параграф с произвольным текстом на 100 слов.

Открылась такая вот структура.

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

Итак, мы видим заголовок первого типа, второго типа и параграф.

Давайте свернем браузер в половину и Visual Studio Code и немного стилизуем эти все элементы.

Обратимся к универсальному селектору.

Обнулим.

Мерджины, пэддинги.

добавим свойства box-sizing border-box также добавим font-family выберем Georgia видим шрифт поменялся теперь для html укажем font-size 62,5% для того чтобы применять рем единицы более удобно было теперь обратимся к

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

Бэкграунд будет черного цвета.

Также укажем DisplayGrid для него, чтобы в дальнейшем разместить элемент по центру.

И теперь обратимся к Divus классам Content.

Для него укажем ширина 70VW, высота будет 50VH.

background будет черного цвета.

Сделаем размещение элемента по центру.

Укажем place self center.

Видим элемент разместился по центру.

Также добавим box shadow.

Значение укажем 5 пикселей, 5 пикселей, 10 пикселей и черный цвет.

Видим появилась такая вот тень для нашего блока.

И также добавим внутренние отступы.

Внутри блока укажем padding 3rem.

Это есть.

Теперь давайте еще рассмотрим в каком формате.

Мы видим у нас применился font-size 62,5%.

Это он равен 10 пикселям.

Несколько укажем, равно 10 пикселей.

Теперь давайте для сравнения применим медиазапросы.

То есть используя медиазапросы, что нам нужно сделать для этого?

Нам нужно обратиться к контенту, к заголовку первого типа и указать font-size 3.5rem.

Видим, заголовок увеличился.

Теперь нам нужно обратиться также к контенту заголовка второго типа.

И указать one size 1.5 rem.

Точнее, для второго типа укажем 3 rem.

Увеличим его также в размере.

Теперь обратимся к контенту и к параграфу.

И для него укажем one size 1.

1 и 6 м то есть 16 пикселей text-align-justify будет и укажем margin-top на 2 м чтобы у нас отступ был сверху на 2 м и так мы видим сюда также давайте для заголовка второго типа укажем margin-top 2 м отступ от первого заголовка будет и так у нас вот есть такой блок и теперь чтобы к примеру нам

укажем минимальная высота 50вх так так лучше теперь для того чтобы к примеру давайте откроем нажмем посмотреть код откроем DevTools и начнем сужать ширину области просмотра и как мы видим вот к примеру когда у нас становится ширина 600

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

font-size 55% и при условии что вот как мы видим ширина 700 пикселей если больше то будет применяться 62,5% font-size если меньше соответственно будет адаптироваться под меньший размер ширины области просмотра но это немного неудобно поскольку нужно

подстраивать постоянно.

То есть если мы уменьшим ширину области просмотра, например, на 450 пикселей, то есть под мобильную версию нам опять же нужно создавать медиазапрос для 450 пикселей и указывать фонсайт, к примеру, 50%.

То есть это не совсем удобно.

Есть отличное решение.

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

Давайте эти все элементы закомментируем.

У нас наш элемент станет в стартовое положение.

Давайте его также свернем в половину.

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

Полезный инструмент.

Называется Modern Fluid Typography.

Заходим на этот сайт.

Этот сайт я добавлю в описание.

И здесь нам нужно задать некоторые размеры.

И давайте посмотрим на этот график.

На графике мы видим fluid size, то есть жидкий размер.

Идет он от 0 до 50 пикселей.

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

Также в пикселях от 300 до 1400.

И вот

Здесь давайте выберем те данные, которые нам нужны.

Итак, root font size, то есть корневой элемент у нас идет 10 пикселей, значит сюда указываем 10.

Минимальное значение укажем 14 пикселей.

Максимальное значение пусть будет 22 пикселя.

Fluid Size укажем 1, то есть это будет 1% от ширины области просмотра.

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

И вот есть сразу у нас уже готовая, скажем так, формула, то есть Clamp.

Давайте ее скопируем, вставим сюда внутрь контента, добавим font-size и вставим туда эту формулу.

И теперь давайте ее также разберем.

То есть у нас идет функция clamp, внутри которой мы указываем минимальное значение 1.4 rem.

1.4 rem это 14 пикселей.

Значение также можно указывать в пикселях, если вы не применяете формулу.

Font Size 62,5% к HTML.

Но поскольку у нас этот Font Size добавлен, давайте будем использовать это все в единицах RAM.

Итак, у нас есть 1,4 RAM, это минимальное значение.

Затем у нас идет 1% от ширины области просмотра плюс 1 RAM.

И это, скажем так, идеальное значение, предпочтительное.

То есть оно будет варьироваться между, как здесь указано в этой формуле, между 400 и 1200.

И максимальное значение 2,2 рем, то есть 22 пикселя.

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

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

Теперь давайте нажмем

Посмотреть код.

Откроем консоль разработчика.

И мы видим, здесь идет ширина 1479 пикселей.

То есть, shift у нас для... Нажмем сюда на эту стрелочку и выясним.

Как мы видим, фонт идет 22 пикселя.

То есть, как указано в этом значении.

То есть, 1200 и выше будет идти 22 пикселя размер шрифта.

А теперь давайте посмотрим, какой размер шрифта у нас будет.

Давайте выберем сюда на шкале 1000 пикселей.

Должен равняться 20 пикселям.

Давайте это проверим.

Сюда переходим и начинаем уменьшать ширину области просмотра и зададим 1000 пикселей.

Теперь наведем сюда курсор и видим, что

Фонт уже у нас равен 20 пикселям.

Соответственно, для заголовка второго типа 30 пикселей, для заголовка первого типа 40 пикселей.

Теперь посмотрим опять же, если у нас будет значение здесь 800 пикселей, будет 18.

Давайте это проверим.

Укажем 800 пикселей ширина.

Области просмотра наводим на текст.

Видим действительно 18 пикселей.

Начинаем сужать и видим, как текст четко сужается.

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

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

А на этом все.

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

Надеюсь, это видео было полезным для вас.

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