Чтобы лучше понять, как работает 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, текст начнёт уменьшаться.

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

Чтобы расчитать самое точное значение динамического (среднего) значения 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);

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

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

Спасибо за clamp

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

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

Полезное видео, спасибо.

Спасибо) теперь понял)

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

Интересная функция, спасибо.

Спасибо 😌

Ого не знал о таком спасибо

Вычисляем wv ) Максимальный размер шрифта / делим на размер контейнера и умножаем на 100 ------------------ например контейнер max-width: 1300px; максимальный размер шрифта font-size: 40px; минимальный размер шрифта font-size: 20px; ----------------------- font-size: clamp(20px, 3.07vw, 40px)

без макбука не получается

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

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

спасибо!

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

Не знал о таком 😨

а как clamp использовать на tailwind?

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

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

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

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

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

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

Какая же она милашка😂

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

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

*Look Ma, No Hands!* 😅😹

Иными словами clamp(a, b, c)= max(a, min(b, c))

ЯВШОКЕ. Смотрел ролики по медиа запросам и тут это. И что мне нужно их учить или нет?

Реклама мегамаркет это треш полный, мыло обычное ,что в магазах стоит по 20 рублей тут продают по 100 рублей, лучше сама Анна затаривайся в мегамаркете😅

Без школьной геометрии здесь не справиться. Плавность переходов можно настроить по каждому GUI-Breakpoint. Математика все может.

а и ещё... размеры шрифтов вроде как принято указывать не в пикселях а единицей измерения например 12pt , - - - .block {font-size: 12pt;}

Девушка на учёного гномика похожа.

Не спасибо, мне лично медиа запросы удобнее.А для плавности можно просто прописать transition xD

Зачем столько воды

продала жопу на мегамаркете

Очень хочется видео не на 20 минут, а на 10. Очень много вводных слов и как будто намеренно удлиняется видео. Думаю, если сжать его и не говорить много всего второстепенного, то выйдет в разы круче. А так очень много приходится перелистывать и даже интуитивно эти моменты вычисляются..(

💩