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

Подписаться 102 тыс.

Просмотров 32 тыс.

50% 1

До конца сентября на Мегамаркете повышенный кешбэк на бытовую технику и электронику до 50% бонусами от СберСпасибо.
При совершении следующих покупок на маркетплейсе этими бонусами можно оплатить до 99% от стоимости заказа.
Переходите по ссылке: clck.ru/35tfbK
Таймкоды:
00:00 Вступление
01:45 Мегамаркет
03:19 Разбор примера
04:46 Почему пишу в пикселях?
08:26 Чем плох адаптив с медиа-запросами?
09:45 Как избавиться от медиа-запросов?
11:28 Дизайнер будет против
13:08 Как посчитать vw?
14:30 Работа с текстом и ссылкой
19:30 clamp для line-height
20:00 Поддержка 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/

Опубликовано:

8 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 73

@user-dx2fe3mu5v 7 месяцев назад

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

@dimonsoftinfo 7 месяцев назад

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

@Edgar-pu1lc 7 месяцев назад

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

@denisnasonov91 5 месяцев назад

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

@user-hs6zf7wk4c 7 месяцев назад

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

@prostoysoft 7 месяцев назад

Спасибо за clamp

@Artmel 7 месяцев назад

Спасибо 😌

@user-cf2pk1eo2r 7 месяцев назад

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

@annblok_webdev 7 месяцев назад

❤️

@user-qs2iv7qj3n 7 месяцев назад

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

@Anodoree 7 месяцев назад

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

@annblok_webdev 7 месяцев назад

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

@konard_pro 6 месяцев назад

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

@YacubeDev 4 месяца назад

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

@otdyhau 7 месяцев назад

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

@cottoncat3700 7 месяцев назад

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

@maxshdev 7 месяцев назад

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

@otdyhau 7 месяцев назад

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

@user-cv6ok3yl4z 7 месяцев назад

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

@user-cp7qw6ox6b 7 месяцев назад

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

@OkazakiTomoyasan 5 месяцев назад

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

@rodigy 7 месяцев назад

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

@arshavin0309 6 месяцев назад

спасибо!

@yurok1991 7 месяцев назад

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

@IgorBobyrev 7 месяцев назад

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

@lifelong_student 7 месяцев назад

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

@annblok_webdev 7 месяцев назад

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

@lifelong_student 7 месяцев назад

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

@vladimirrodichev2447 7 месяцев назад

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

@TipAnswer 7 месяцев назад

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

@nurzhanovchanel 7 месяцев назад

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

@maxshdev 7 месяцев назад

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

@MrBenedig 7 месяцев назад

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

@annblok_webdev 7 месяцев назад

Да t.me/tpverstakchat

@aleksandrtimashov8145 7 месяцев назад

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

@roxone314 7 месяцев назад

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

@azizbek_jastlekov 7 месяцев назад

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

@TipAnswer 7 месяцев назад

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

@user-jt7wb3zc1m 7 месяцев назад

*Look Ma, No Hands!* 😅😹

@user-ml5dv2zm8r 7 месяцев назад

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

@annblok_webdev 7 месяцев назад

Тоже можно

@user-fi3bf6ke8s 7 месяцев назад

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

@user-wg7gm7xo9y 7 месяцев назад

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

@vitalii.litvinov 7 месяцев назад

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

@guestalex Месяц назад

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

@vanmihaylovich 7 месяцев назад

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

@user-cp7qw6ox6b 7 месяцев назад

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

@Funto-zl6ly 7 месяцев назад

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

@ferryterry1873 4 месяца назад

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

@stoyn6826 7 месяцев назад

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

@jhfy_izver8286 7 месяцев назад

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

@d9kd9k 7 месяцев назад

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

@jhfy_izver8286 7 месяцев назад

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

@user-xt7mj9de9t 7 месяцев назад

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

@annblok_webdev 7 месяцев назад

codepen

@otdyhau 7 месяцев назад

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

@souleater4413 20 дней назад

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

@annblok_webdev 19 дней назад

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

@alienusbarbarus4532 23 дня назад

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

@evgenii1393 7 месяцев назад

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

@antonyeskimo7593 7 месяцев назад

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

@ferryterry1873 4 месяца назад

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

@Moonlight-rj9zq 6 месяцев назад

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

@rustammadrimov5658 7 месяцев назад

💩

@vladork3032 6 месяцев назад

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