Создавайте меньше правил останова и медиазапросов с помощью этих простых методов CSS.

Описание: Переключаться между контрольными точками для настольных компьютеров, планшетов и мобильных устройств внутри GenerateBlocks только для того, чтобы подправить отступы, размеры шрифтов и количество столбцов сетки?

Да… это тоже не самый приятный способ провести день.

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

Вместо написания дополнительных медиа-запросов мы позволим браузеру сделать всю основную работу.

В этом видео вы узнаете:

Как использовать clamp() для адаптивных отступов (не только для типографики)
Почему блок ch идеально подходит для читаемой ширины контента
Как создавать автоматически адаптивные сетки с помощью repeat(auto-fit, minmax())
Почему соотношение сторон лучше фиксированной высоты для единообразных изображений карточек
Когда контейнерные запросы могут быть лучшей альтернативой медиа-запросам

Эти методы значительно сокращают:

Перестановку контрольных точек
Переключение между панелями внутри редактора
Повторяющиеся переопределения для мобильных устройств
Ненужный CSS

Если вы устали от «панельного взаимодействия» в GenerateBlocks и хотите более чистого и эффективного рабочего процесса — это видео для вас.


📌 Упомянутые видео по теме:

Мои советы по типографике CSS (с примерами clamp()):    • 10 CSS tricks I wish I knew sooner (typogr...  

Видео о контейнерных запросах:    • Container Queries NATIVE in GenerateBlocks...  

👉 Код автоподстройки: repeat(auto-fit, minmax(250px, 1fr))

- - - - - - - - - - - - - - -

🪰 Присоединяйтесь к более чем 600 владельцам агентств и фрилансерам, работающим вместе над улучшением работы агентств в нашем закрытом сообществе Barfly: https://theadmin.bar/barfly

⚡ Веб-дизайн и разработка: https://theadmin.bar/yt-agency

🎁 Мои лучшие бесплатные ресурсы, руководства и полезные материалы: https://theadmin.bar/free

- - - - - - - - - - - - - - -

💻 Посетите наш сайт: https://theadmin.bar/yt-tab

🗨 Присоединяйтесь к нашему бесплатному сообществу в Facebook: https://theadmin.bar/yt-community

📨 Подпишитесь на нашу рассылку: https://theadmin.bar/yt-tfc

🔁 Продавайте больше планов обслуживания: https://theadmin.bar/yt-wom

🧮 Используйте мой калькулятор цен на сайте: https://theadmin.bar/yt-calculator

📜 Получите мой шаблон коммерческого предложения: https://theadmin.bar/yt-proposal

☑️ Делайте больше с моими контрольными списками: https://theadmin.bar/yt-checklists

🔴 Расписание прямых трансляций: https://theadmin.bar/yt-events

🔧 Инструменты, которые я использую: https://theadmin.bar/yt-tools