CSS Функции calc(), min(), max(), clamp()

preview_player
Показать описание
✏️ В арсенале технологий CSS есть набор функций, благодаря которым можно экономить десятки строк кода, зачастую заменяя JavaScript-костыли. Давайте разберем, что это за функции и в каких ситуациях их стоит применять.

🔴 Timeline:
▶ 00:00​ | Вступление
▶ 00:22 | Функция calc()
▶ 02:09 | Использование calc() для размеров контентного контейнера container
▶ 04:17 | Использование calc() для задания полноэкранной высоты с учетом высоты header
▶ 05:16 | Использование calc() для задания ширины колонкам
▶ 05:39 | Функция min()
▶ 06:58 | Функция max()
▶ 07:40 | Функция clamp()
▶ 08:40 | Динамический размер шрифта через clamp()
▶ 09:27​ | Заключение

📚 Полезные ссылки:

💬 Чат в телеграмме (помощь новичкам):

🔸 Boosty (поддержать канал):

🗂️ Бесплатные курсы на канале:

📌 Автор:

#frontend #фронтенд #css
Рекомендации по теме
Комментарии
Автор

"Был бы у меня такой clamp, я может и не женился бы никогда..." 😁Очень полезная функция, спасибо за видос!

FeetUnder
Автор

Ого, не знала, что min и max можно применять для любых свойств. А clamp для адаптивного размера шрифта -- вообще огонь!

meloibq
Автор

Канал - находка для начинающих 👍 Ждём практических видео

xwsplkk
Автор

Класс, очень суперски рассказываешь. Очень здорово прописываешь сценарий текста, все четко и без воды !!)

VitalBielik
Автор

Очень круто, спасибо!) дальше обязательно буду смотреть мастер классы)

Ivanfwit
Автор

Неплохо, неплохо. Давно искал подобного рода информацию. Спасибо за видео, отлично!!

tcmlmuk
Автор

clamp - имба, очень не хватало его раньше.

Также стоило упомянуть про *vh (dvh, lvh, svh) для мобилок, они позволяют работать с размером в зависимости от вылезающей менюшки мобильного браузера! Будет полезно знать про их существование 😊

gift.albooms
Автор

Здравствуйте, подскажите пожалуйста, прибрел такую привычку. весь мой адаптив в большинстве связан с формулой font size: calc(16px + ( 36-16 ) * (100vw -360px) / (1920 - 360)));, использовал с margin, gap и т.д.
Мне казалось это каким то граалем, сокращалось использование медиа запросов, все плавно уменьшалось. Но вот пока не проверял на производительность, может быть такую формулу нужно стараться использовать как можно реже? И задавать фиксированные значения через медиа запросы, например на 1920px, 700px, 480px, 320px.

Roman-P.
Автор

6:25, Подскажите пожалуйста, откуда у нас взялось число 600 (шиирна экрана 600px)? Не вижу это явно указанного в коде

tortik_
Автор

1:02, вы имели ввиду оператор?) операнд это же про другое

colodatwin
Автор

Крутой видос, но у моих учеников мозги поплавятся от таких объяснений 😂

Luiming-
Автор

а нельзя заранее взять и max -width задать 1200px
чем вот это calc писать

abdul_js
Автор

Все отлично, но один большой минус что читаешь и быстро. Не хватает живого общения, объяснения

Ruslanik_B
Автор

Автор, строка в коде:
width: calc (10px + 20px);
Это конечно полный бред...
Тебе не кажется, что проще будет
width: 30px;

Richard_Ogurcsov
welcome to shbcf.ru