Перейти к содержимому

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

The Admin Bar

0:00 / 0:00

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

1 593 просмотра · 7 мес. назад
The Admin Bar
15,3 тыс. подписчиков
1 593 просмотра · 7 мес. назад
Переключаться между контрольными точками для настольных компьютеров, планшетов и мобильных устройств внутри 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