Чтобы лучше понять, как работает 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;.
Ты очень вовремя с этим видео, я как раз начал изучение этой функции благодаря тебе. Спасибо за твой контент ❤ PS лайфхак как узнать сколько vw использовать? - Открываем сайт, который конвертирует px в vw относительно заданной ширины. Ширину экрана берём ту, что в макете планшета и размер текста от туда же. После получения значения vw - это и будет наше центральное значение. Либо мне показалось, либо это действительно именно так и работает.
Часто на проектах столько других заморочек, что быстрее всё медиа запросами прописать, и уделить время другим вещам. Так то прикольно, спасибо за разъяснения! Чтобы это использовать, точно надо как следует потренироваться, приноровиться к функции. Надо будет попробовать)
Через Медиа-Запросы - при изменении размеров ширины и размера текста, можно добавить плавность перехода от одного Размера Медиа к другому, просто добавив для всего содержимого в стиле .Блока {transition:all 0.66s;} - или для всей страницы: * {transition:all 0.66s;} и тогда у нас добавляется плавность при изменении размеров с Медиа-Запросами. C цифрой - transition:all 0.66s; - играйтесь сами. Это для тех кому ещё нужен залипательный вау эффект с плавным переходом, при трансформации изменении размеров абсолютно всех свойств, даже для плавной смены цвета.
Вычисляем wv ) Максимальный размер шрифта / делим на размер контейнера и умножаем на 100 ------------------ например контейнер max-width: 1300px; максимальный размер шрифта font-size: 40px; минимальный размер шрифта font-size: 20px; ----------------------- font-size: clamp(20px, 3.07vw, 40px)
Как определить значение текста в vw, это ж простая математика, vw - это проценты от ширины экрана и ничего сложно нет что бы посчитать размер и его процентное соотношение между 2 крайними точками. И не надо никакой магии и интуиции)
Чтобы расчитать самое точное значение динамического (среднего) значения 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);
@@annblok_webdev, нет, я спрашивал не про заголовок, а про шрифт в редакторе кода на черном фоне. Напоминает Fira Code, но не уверен. Ну, например, на разборе примера на 3:35 строчка номер 42: "padding: 20px 0;". Тут нули с косой чертой.
Реклама мегамаркет это треш полный, мыло обычное ,что в магазах стоит по 20 рублей тут продают по 100 рублей, лучше сама Анна затаривайся в мегамаркете😅
w-[clamp(12px,2.5vm,30px)] или w-[clamp(12px_2.5vm_30px)] , в общем с запятыми или с нижним подчеркиванием, вот как раз на неделе заюзал и забыл 😂 или и то то пашет, главное не ставит пробелы между значениями
большинство сайтом исеет посещение 45 секунд, последнее что буд волновать посетителя это ваши плавные переходы между размерами, перестаньте ловить блох на бешеной собаке
Конечно учить !!!!! Анна , это не компания , в которую вы попадете . Там свои требования , под которые вы подстраиваетесь , а не компания под вас . Если там принять по медиа делать , будете делать
Но ведь суть не в плавности. Эта плавность сработает только в моменте изменения экрана. Суть в том, чтобы элемент сделать максимально адаптивным, если того требует ситуация.
Очень хочется видео не на 20 минут, а на 10. Очень много вводных слов и как будто намеренно удлиняется видео. Думаю, если сжать его и не говорить много всего второстепенного, то выйдет в разы круче. А так очень много приходится перелистывать и даже интуитивно эти моменты вычисляются..(
Чтобы лучше понять, как работает 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, текст начнёт уменьшаться.
Чтоб не считать есть clamp calculator. 😉
Я вахуе
vw = max-size / (block-width / 100%)
@@СергейБойко-м1ъ это формула чего именно? Среднее в clamp vw значение?
@@АндрейМаксименя , ну типа того. То я сам попытался переписать то что вверху написали
Не стоит для подобных «кнопок» указывать размеры напрямую. Указание размеров напрямую будет иметь серьёзные последствия в будущем: многоязычность, использование шрифта 'system-ui', контент который будет генерироваться процедурно или банальное изменение дизайна сломают эту кнопку.
Самое простое решение это заставить работать как тег , для этого достаточно прописать width: fit-content;.
Ты очень вовремя с этим видео, я как раз начал изучение этой функции благодаря тебе. Спасибо за твой контент ❤
PS лайфхак как узнать сколько vw использовать? - Открываем сайт, который конвертирует px в vw относительно заданной ширины. Ширину экрана берём ту, что в макете планшета и размер текста от туда же. После получения значения vw - это и будет наше центральное значение.
Либо мне показалось, либо это действительно именно так и работает.
❤️
Спасибо за clamp
Часто на проектах столько других заморочек, что быстрее всё медиа запросами прописать, и уделить время другим вещам.
Так то прикольно, спасибо за разъяснения! Чтобы это использовать, точно надо как следует потренироваться, приноровиться к функции. Надо будет попробовать)
Попробовать точно стоит 🔥
Попробовал, это реально крутая вещь, спасибо!
Через Медиа-Запросы - при изменении размеров ширины и размера текста, можно добавить плавность перехода от одного Размера Медиа к другому, просто добавив для всего содержимого в стиле .Блока {transition:all 0.66s;}
- или для всей страницы:
* {transition:all 0.66s;}
и тогда у нас добавляется плавность при изменении размеров с Медиа-Запросами.
C цифрой - transition:all 0.66s; - играйтесь сами.
Это для тех кому ещё нужен залипательный вау эффект с плавным переходом, при трансформации изменении размеров абсолютно всех свойств, даже для плавной смены цвета.
Эта плавность, мне кажется, надуманная проблема, ну или очень редкая и специфичная. Для чего, как пользователь, вы будете так ресайзить окно?
@@cottoncat3700 согласен. Обычные пользователи не делают ресайз таким образом.
Спасибо) теперь понял)
Полезное видео, спасибо.
Вычисляем wv )
Максимальный размер шрифта / делим на размер контейнера и умножаем на 100
------------------
например
контейнер
max-width: 1300px;
максимальный размер шрифта
font-size: 40px;
минимальный размер шрифта
font-size: 20px;
-----------------------
font-size: clamp(20px, 3.07vw, 40px)
Ого не знал о таком спасибо
Спасибо 😌
Не знал о таком 😨
А кто знал? Анна опять откопала какую-то конфетку 😊👌
Как определить значение текста в vw, это ж простая математика, vw - это проценты от ширины экрана и ничего сложно нет что бы посчитать размер и его процентное соотношение между 2 крайними точками. И не надо никакой магии и интуиции)
Здравствуйте, я тоже не знал. Медиазапросы не понимал, но написав дипломный проект лучше стал понимать. Но нужна практика, практика.
Чтобы расчитать самое точное значение динамического (среднего) значения 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);
а если добавить AUTO ?, в Font-size: clamp (12px, auto, 48px) - - - так прокатит изменение размера текста при адаптивном изменении ширины блока ?
без макбука не получается
спасибо!
Что на счет calc() ? В чем разница смотря с стороны адаптивности?
Если в блоке было бы изображение, то без медиа, не обойтись😢
При этом логика адаптива размазывается по разным блокам, и поддерживать такое становится тяжелее.
*Look Ma, No Hands!* 😅😹
А что за шрифт используется в редакторе кода? Похож на JetBrains Mono, но здесь нолик с косой чертой, а не с точкой внутри, как у JetBrains Mono.
На видео заголовок с точкой, подключен шрифт JetBrains Mono
@@annblok_webdev, нет, я спрашивал не про заголовок, а про шрифт в редакторе кода на черном фоне. Напоминает Fira Code, но не уверен. Ну, например, на разборе примера на 3:35 строчка номер 42: "padding: 20px 0;". Тут нули с косой чертой.
Реклама мегамаркет это треш полный, мыло обычное ,что в магазах стоит по 20 рублей тут продают по 100 рублей, лучше сама Анна затаривайся в мегамаркете😅
купил там наушники с хорошей скидкой🤣 вместо 1300₽, 93₽ заплатил
да, товары до 100 рублей лучше покупать в обычном магазине
промокод на 1500₽ был при первом заказе от 1550₽
Есть другие параметры. Например min/max, без clamp.
Я так понимаю это хороший вариант когда ты делаешь чисто десктоп приложение, чтобы для ноутбуков уменьшить размеры самое то.
Какая же она милашка😂
а что, если в качестве среднего значения в clamp использовать calc ( размер шрифта для планшета / ширина экрана планшета ) vw - и не надо гадать ))
Тоже можно
Полезная штука, кажется vw и vh с ней могут заиграть новыми красками
А есть просто чат, где насущные вопросы обсуждаются? А не просто, где публикуются статейки?
Да t.me/tpverstakchat
А что за программа такая интересная? Тут сразу и три закладки с HTML, CSS, JS и демо результата?
codepen
Иными словами clamp(a, b, c)= max(a, min(b, c))
caniuse пишет что clamp не работает в IE вообще. Так что будет зависеть от ТЗ.
кто-то еще помнит про IE?
Какой нахрен ИЕ в наше время??? Проснись, друг!
а как clamp использовать на tailwind?
w-[clamp(12px,2.5vm,30px)] или w-[clamp(12px_2.5vm_30px)] , в общем с запятыми или с нижним подчеркиванием, вот как раз на неделе заюзал и забыл 😂 или и то то пашет, главное не ставит пробелы между значениями
а и ещё... размеры шрифтов вроде как принято указывать не в пикселях а единицей измерения например 12pt , - - - .block {font-size: 12pt;}
Без школьной геометрии здесь не справиться. Плавность переходов можно настроить по каждому GUI-Breakpoint. Математика все может.
большинство сайтом исеет посещение 45 секунд, последнее что буд волновать посетителя это ваши плавные переходы между размерами, перестаньте ловить блох на бешеной собаке
ЯВШОКЕ. Смотрел ролики по медиа запросам и тут это. И что мне нужно их учить или нет?
Конечно учить !!!!! Анна , это не компания , в которую вы попадете . Там свои требования , под которые вы подстраиваетесь , а не компания под вас . Если там принять по медиа делать , будете делать
Не спасибо, мне лично медиа запросы удобнее.А для плавности можно просто прописать transition xD
Но ведь суть не в плавности. Эта плавность сработает только в моменте изменения экрана. Суть в том, чтобы элемент сделать максимально адаптивным, если того требует ситуация.
Девушка на учёного гномика похожа.
продала жопу на мегамаркете
Очень хочется видео не на 20 минут, а на 10. Очень много вводных слов и как будто намеренно удлиняется видео. Думаю, если сжать его и не говорить много всего второстепенного, то выйдет в разы круче. А так очень много приходится перелистывать и даже интуитивно эти моменты вычисляются..(
поставь скорость х2 и будет тебе 10 минут 😀
💩
Зачем столько воды
Да у неё постоянно так
@@antonyeskimo7593 Так если человек курсы рекламирует , свои . Понятное дело , что тут будет чистейшая вода )
Интересная функция, спасибо.