❌ Медиа-запросы не нужны, если CSS писать так
ฝัง
- เผยแพร่เมื่อ 7 มิ.ย. 2024
- Вы знали, что можно сократить количество символов 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
Видео про единицы измерения:
• Единицы измерения CSS ...
• Единицы измерения CSS ...
🔵 Дзен - zen.yandex.ru/annblok
🔵 ВК - tpverstak
🔵 Telegram - t.me/tpverstak
🔵 Чат Telegram - t.me/tpverstakchat
🔵 Instagram - / annblok
🔵 TikTok - / annblok_webdev
🔴 Задать вопрос - frontendhelp.me/ru
🔴 Обучение - frontendblok.com/
Чтобы лучше понять, как работает 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%)
@@user-nt4xo1vz4o это формула чего именно? Среднее в clamp vw значение?
@@user-eg5cg3lk3e , ну типа того. То я сам попытался переписать то что вверху написали
Не стоит для подобных «кнопок» указывать размеры напрямую. Указание размеров напрямую будет иметь серьёзные последствия в будущем: многоязычность, использование шрифта 'system-ui', контент который будет генерироваться процедурно или банальное изменение дизайна сломают эту кнопку.
Самое простое решение это заставить работать как тег , для этого достаточно прописать width: fit-content;.
Попробовал, это реально крутая вещь, спасибо!
Ты очень вовремя с этим видео, я как раз начал изучение этой функции благодаря тебе. Спасибо за твой контент ❤
PS лайфхак как узнать сколько vw использовать? - Открываем сайт, который конвертирует px в vw относительно заданной ширины. Ширину экрана берём ту, что в макете планшета и размер текста от туда же. После получения значения vw - это и будет наше центральное значение.
Либо мне показалось, либо это действительно именно так и работает.
❤️
Чтобы расчитать самое точное значение динамического (среднего) значения 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);
без макбука не получается
Спасибо за clamp
Часто на проектах столько других заморочек, что быстрее всё медиа запросами прописать, и уделить время другим вещам.
Так то прикольно, спасибо за разъяснения! Чтобы это использовать, точно надо как следует потренироваться, приноровиться к функции. Надо будет попробовать)
Попробовать точно стоит 🔥
а если добавить AUTO ?, в Font-size: clamp (12px, auto, 48px) - - - так прокатит изменение размера текста при адаптивном изменении ширины блока ?
Полезное видео, спасибо.
Через Медиа-Запросы - при изменении размеров ширины и размера текста, можно добавить плавность перехода от одного Размера Медиа к другому, просто добавив для всего содержимого в стиле .Блока {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)
Ого не знал о таком спасибо
Спасибо 😌
Здравствуйте, я тоже не знал. Медиазапросы не понимал, но написав дипломный проект лучше стал понимать. Но нужна практика, практика.
А что за шрифт используется в редакторе кода? Похож на JetBrains Mono, но здесь нолик с косой чертой, а не с точкой внутри, как у JetBrains Mono.
На видео заголовок с точкой, подключен шрифт JetBrains Mono
@@annblok_webdev, нет, я спрашивал не про заголовок, а про шрифт в редакторе кода на черном фоне. Напоминает Fira Code, но не уверен. Ну, например, на разборе примера на 3:35 строчка номер 42: "padding: 20px 0;". Тут нули с косой чертой.
Как определить значение текста в vw, это ж простая математика, vw - это проценты от ширины экрана и ничего сложно нет что бы посчитать размер и его процентное соотношение между 2 крайними точками. И не надо никакой магии и интуиции)
Я так понимаю это хороший вариант когда ты делаешь чисто десктоп приложение, чтобы для ноутбуков уменьшить размеры самое то.
спасибо!
а как clamp использовать на tailwind?
w-[clamp(12px,2.5vm,30px)] или w-[clamp(12px_2.5vm_30px)] , в общем с запятыми или с нижним подчеркиванием, вот как раз на неделе заюзал и забыл 😂 или и то то пашет, главное не ставит пробелы между значениями
Есть другие параметры. Например min/max, без clamp.
Не знал о таком 😨
А кто знал? Анна опять откопала какую-то конфетку 😊👌
А есть просто чат, где насущные вопросы обсуждаются? А не просто, где публикуются статейки?
Да t.me/tpverstakchat
Если в блоке было бы изображение, то без медиа, не обойтись😢
При этом логика адаптива размазывается по разным блокам, и поддерживать такое становится тяжелее.
А что за программа такая интересная? Тут сразу и три закладки с HTML, CSS, JS и демо результата?
codepen
а что, если в качестве среднего значения в clamp использовать calc ( размер шрифта для планшета / ширина экрана планшета ) vw - и не надо гадать ))
Тоже можно
Полезная штука, кажется vw и vh с ней могут заиграть новыми красками
caniuse пишет что clamp не работает в IE вообще. Так что будет зависеть от ТЗ.
кто-то еще помнит про IE?
Какой нахрен ИЕ в наше время??? Проснись, друг!
Какая же она милашка😂
*Look Ma, No Hands!* 😅😹
ЯВШОКЕ. Смотрел ролики по медиа запросам и тут это. И что мне нужно их учить или нет?
Конечно учить !!!!! Анна , это не компания , в которую вы попадете . Там свои требования , под которые вы подстраиваетесь , а не компания под вас . Если там принять по медиа делать , будете делать
Иными словами clamp(a, b, c)= max(a, min(b, c))
Реклама мегамаркет это треш полный, мыло обычное ,что в магазах стоит по 20 рублей тут продают по 100 рублей, лучше сама Анна затаривайся в мегамаркете😅
купил там наушники с хорошей скидкой🤣 вместо 1300₽, 93₽ заплатил
да, товары до 100 рублей лучше покупать в обычном магазине
промокод на 1500₽ был при первом заказе от 1550₽
Без школьной геометрии здесь не справиться. Плавность переходов можно настроить по каждому GUI-Breakpoint. Математика все может.
большинство сайтом исеет посещение 45 секунд, последнее что буд волновать посетителя это ваши плавные переходы между размерами, перестаньте ловить блох на бешеной собаке
а и ещё... размеры шрифтов вроде как принято указывать не в пикселях а единицей измерения например 12pt , - - - .block {font-size: 12pt;}
Зачем столько воды
Да у неё постоянно так
@@antonyeskimo7593 Так если человек курсы рекламирует , свои . Понятное дело , что тут будет чистейшая вода )
Не спасибо, мне лично медиа запросы удобнее.А для плавности можно просто прописать transition xD
Но ведь суть не в плавности. Эта плавность сработает только в моменте изменения экрана. Суть в том, чтобы элемент сделать максимально адаптивным, если того требует ситуация.
Девушка на учёного гномика похожа.
продала жопу на мегамаркете
💩
Очень хочется видео не на 20 минут, а на 10. Очень много вводных слов и как будто намеренно удлиняется видео. Думаю, если сжать его и не говорить много всего второстепенного, то выйдет в разы круче. А так очень много приходится перелистывать и даже интуитивно эти моменты вычисляются..(
поставь скорость х2 и будет тебе 10 минут 😀