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

@user-eg5cg3lk3e

7 ай бұрын

Чтоб не считать есть clamp calculator. 😉

@Funto-zl6ly

7 ай бұрын

Я вахуе

@user-nt4xo1vz4o

7 ай бұрын

vw = max-size / (block-width / 100%)

@user-eg5cg3lk3e

7 ай бұрын

@@user-nt4xo1vz4o это формула чего именно? Среднее в clamp vw значение?

@user-nt4xo1vz4o

7 ай бұрын

@@user-eg5cg3lk3e , ну типа того. То я сам попытался переписать то что вверху написали

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

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

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

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

@annblok_webdev

7 ай бұрын

❤️

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

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

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

@annblok_webdev

7 ай бұрын

Попробовать точно стоит 🔥

Спасибо за clamp

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

@cottoncat3700

7 ай бұрын

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

@maxshdev

7 ай бұрын

@@cottoncat3700 согласен. Обычные пользователи не делают ресайз таким образом.

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

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

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

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

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

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

спасибо!

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

@annblok_webdev

7 ай бұрын

На видео заголовок с точкой, подключен шрифт JetBrains Mono

@lifelong_student

7 ай бұрын

@@annblok_webdev, нет, я спрашивал не про заголовок, а про шрифт в редакторе кода на черном фоне. Напоминает Fira Code, но не уверен. Ну, например, на разборе примера на 3:35 строчка номер 42: "padding: 20px 0;". Тут нули с косой чертой.

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

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

@IgorBobyrev

7 ай бұрын

А кто знал? Анна опять откопала какую-то конфетку 😊👌

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

@TipAnswer

7 ай бұрын

w-[clamp(12px,2.5vm,30px)] или w-[clamp(12px_2.5vm_30px)] , в общем с запятыми или с нижним подчеркиванием, вот как раз на неделе заюзал и забыл 😂 или и то то пашет, главное не ставит пробелы между значениями

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

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

@annblok_webdev

7 ай бұрын

Да t.me/tpverstakchat

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

@maxshdev

7 ай бұрын

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

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

@annblok_webdev

7 ай бұрын

Тоже можно

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

@vitalii.litvinov

7 ай бұрын

кто-то еще помнит про IE?

@guestalex

Ай бұрын

Какой нахрен ИЕ в наше время??? Проснись, друг!

*Look Ma, No Hands!* 😅😹

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

@ferryterry1873

4 ай бұрын

Конечно учить !!!!! Анна , это не компания , в которую вы попадете . Там свои требования , под которые вы подстраиваетесь , а не компания под вас . Если там принять по медиа делать , будете делать

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

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

@jhfy_izver8286

7 ай бұрын

купил там наушники с хорошей скидкой🤣 вместо 1300₽, 93₽ заплатил

@d9kd9k

7 ай бұрын

да, товары до 100 рублей лучше покупать в обычном магазине

@jhfy_izver8286

7 ай бұрын

промокод на 1500₽ был при первом заказе от 1550₽

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

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

@annblok_webdev

7 ай бұрын

codepen

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

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

@user-cp7qw6ox6b

7 ай бұрын

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

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

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

@antonyeskimo7593

7 ай бұрын

Да у неё постоянно так

@ferryterry1873

4 ай бұрын

@@antonyeskimo7593 Так если человек курсы рекламирует , свои . Понятное дело , что тут будет чистейшая вода )

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

@annblok_webdev

20 күн бұрын

Но ведь суть не в плавности. Эта плавность сработает только в моменте изменения экрана. Суть в том, чтобы элемент сделать максимально адаптивным, если того требует ситуация.

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

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

@gr4.dushnila

21 күн бұрын

поставь скорость х2 и будет тебе 10 минут 😀

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

💩