❌ Медиа-запросы не нужны, если CSS писать так

Вы знали, что можно сократить количество символов CSS и даже вовсе избавить от media-запросов на простом сайте? Это можно реализовать с функцией clamp(), поэтому в этом видео расскажу максимально подробно, как этим пользоваться.

Таймкоды:
00:00 Вступление
02:00 Разбор примера
03:05 Почему пишу в пикселях?
04:46 Чем плох адаптив с медиа-запросами?
08:26 Как избавиться от медиа-запросов?
09:45 Дизайнер будет против
11:28 Как посчитать vw?
13:08 Работа с текстом и ссылкой
14:30 clamp для line-height
19:30 Поддержка clamp

Видео про единицы измерения:

[dxfemuv]

Чтобы лучше понять, как работает clamp(), можно использовать max() и min().
Например, эти два варианта будут работать абсолютно одинаково
font-size: clamp(20px, 5vw, 30px);
font-size: max(20px, min(5vw, 30px));

И подбирать среднее значение наугад, по-моему, не очень правильно. При помощи этого значения можно очень точно указать, при каком разрешении начнёт уменьшаться текст. Тут главное понять, как это работает.
Допустим, нам максимальный размер текста нужен 30px, минимальный - 20px, и чтобы он начал уменьшаться на разрешении 600px. Для этого надо вычислить значение с vw, что бы оно равнялось 30px при разрешении 600px. Получается если 100vw = 600px, то 1vw = 6px, ну а 30px будет равно 5vw.
Собственно выходит такая формула
30px / (600px / 100) = 5vw.
В итоге как только у нас 5vw будет меньше 30px, текст начнёт уменьшаться.

[dimonsoftinfo]

Не стоит для подобных «кнопок» указывать размеры напрямую. Указание размеров напрямую будет иметь серьёзные последствия в будущем: многоязычность, использование шрифта 'system-ui', контент который будет генерироваться процедурно или банальное изменение дизайна сломают эту кнопку.
Самое простое решение это заставить работать как тег <button>, для этого достаточно прописать width: fit-content;.

[denisnasonov]

Попробовал, это реально крутая вещь, спасибо!

[cfpkeor]

Ты очень вовремя с этим видео, я как раз начал изучение этой функции благодаря тебе. Спасибо за твой контент ❤
PS лайфхак как узнать сколько vw использовать? - Открываем сайт, который конвертирует px в vw относительно заданной ширины. Ширину экрана берём ту, что в макете планшета и размер текста от туда же. После получения значения vw - это и будет наше центральное значение.

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

[konard_pro]

Чтобы расчитать самое точное значение динамического (среднего) значения clamp можно просто подставить значения в формулу:

(FontSizeMin + FontSizeMax) / (WidthMin + WithMax) * 100 = X vw

Например для
font-size 32px на width 360px
font-size 60px на width 1000px

Среднее значение будет
= (32+60)/(360+1000) * 100
= 92 / 1360 * 100
= 0.067 * 100
= 6.7vw

Соответственно:

font-size: clamp(32px, 6.7vw, 60px);

[Anodoree]

Часто на проектах столько других заморочек, что быстрее всё медиа запросами прописать, и уделить время другим вещам.
Так то прикольно, спасибо за разъяснения! Чтобы это использовать, точно надо как следует потренироваться, приноровиться к функции. Надо будет попробовать)

[OkazakiTomoyasan]

Вычисляем wv )
Максимальный размер шрифта / делим на размер контейнера и умножаем на 100

например
контейнер
max-width: 1300px;
максимальный размер шрифта
font-size: 40px;
минимальный размер шрифта
font-size: 20px;

font-size: clamp(20px, 3.07vw, 40px) <!-- 40/1300* 100--!>

[otdyhau]

а если добавить AUTO ?, в Font-size: clamp (12px, auto, 48px) - - - так прокатит изменение размера текста при адаптивном изменении ширины блока ?

[otdyhau]

Через Медиа-Запросы - при изменении размеров ширины и размера текста, можно добавить плавность перехода от одного Размера Медиа к другому, просто добавив для всего содержимого в стиле .Блока {transition:all 0.66s;}
- или для всей страницы:
* {transition:all 0.66s;}
и тогда у нас добавляется плавность при изменении размеров с Медиа-Запросами.
C цифрой - transition:all 0.66s; - играйтесь сами.
Это для тех кому ещё нужен залипательный вау эффект с плавным переходом, при трансформации изменении размеров абсолютно всех свойств, даже для плавной смены цвета.

[cvokylz]

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

[rodigy]

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

[lifelong_student]

А что за шрифт используется в редакторе кода? Похож на JetBrains Mono, но здесь нолик с косой чертой, а не с точкой внутри, как у JetBrains Mono.

[vladimirrodichev]

Есть другие параметры. Например min/max, без clamp.

[TipAnswer]

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

[MrBenedig]

А есть просто чат, где насущные вопросы обсуждаются? А не просто, где публикуются статейки?

[nurzhanovchanel]

Если в блоке было бы изображение, то без медиа, не обойтись😢

[mldvzmr]

а что, если в качестве среднего значения в clamp использовать calc ( размер шрифта для планшета / ширина экрана планшета ) vw - и не надо гадать ))

[xtmjdet]

А что за программа такая интересная? Тут сразу и три закладки с HTML, CSS, JS и демо результата?

[roxone]

Полезная штука, кажется vw и vh с ней могут заиграть новыми красками

[wggmxoy]

caniuse пишет что clamp не работает в IE вообще. Так что будет зависеть от ТЗ.