19.01.2022

Адаптивные макеты без медиа-запросов!

Адаптивные макеты без медиа-запросов!

От создателя: мой друг шутил: HTML уже адаптивен. Это делают дизайнеры. Это странноватое мнение, но в целом правильное. Если вы напишете ванильный HTML с правильной семантической разметкой, он, по последней мере, ПРИГОДЕН для UІ. Возможно, это безобразно, возможно, имеет не самый желанный вид для юзеров, но допустимо.

Естественное обертывание обычных элементов часто может быть лучше, если мы просто позволим ему делать свое дело. Даже по сопоставлению с такими вещами, как grid-template, поэтому что нам не нужно микроуправлять всеми нашими контрольными точками медиа-запросов.

Flex-wrap дает нам ту же возможность, но объявление ширины для переноса было незначительно сложным, пока в CSS не появились вычисления. CALC, MIN и MAX дают нам возможность переопределять значения таким образом, чтоб выполнять автоматическую обертку столбцов, которые не подходят. Допустим, у нас есть наружный контейнер с именем div.content который содержит MAIN, а также два DIV.extra, которые мы желаем использовать в качестве эластичных sidebar–ов.

ЕСЛИ вы используете ASIDE, чтоб сказать, что хотите отодвинуть блок в сторону, вы используете их в таковой же презентационной манере, как и CENTER. HTML-теги следует выбирать в согласовании со структурой и грамматикой. Единственная грамматическая / структурная причина для aside — литературная, к примеру, в произведениях Шекспира или актеров, «ломающих четвертую стенку», таких как Феррис Бьюллер или Дэдпул. Если это не «необязательный подраздел, относящийся к основному содержанию» — это НЕ aside. Этот раздел курсивом? ЭТО aside!

Сейчас предположим, что мы хотим, чтобы основной столбец имел наименьшую ширину 48em, а наши sidebar-ы имели наименьшую ширину 16em, но мы хотим, чтоб автоматически переносились, а при обертывании расширялись по размеру. Присвоим контейнеру характеристики flex и flex-wrap.

CSS

Для MAIN присвоим процентную ширину и некую магическую минимальную ширину.

CSS

50% гарантирует, что контейнер вырастет довольно, чтобы вместить столбцы. Магия в вычислении min-width:min. Он или окажется размером меньше 36em, либо займет 100% доступного места, в зависимости от того, что меньше. Тогда ВСЕ что нам необходимо – это .extra:

CSS

Ширина контейнера будет приближатся к 12em либо к ширине экрана, в зависимости от того, что меньше. Таким образом, когда ширина 36em + 12em + 12em == 60em, наши составляющие уместятся рядом. Если вы сделаете это, последние столбцы будут обернуты, чтоб освободить место, где и как необходимо. Поскольку мы используем только минимальную ширину в качестве элемента управления, составляющие будут расширяться, чтобы заполнить контейнер, когда они действуют как один столбец. Приведу пример кода:

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

Заключение

Это мощнейший, но простой метод, который действительно может сделать лучше ваш UI, когда дело доходит до адаптивного дизайна. Непременно, некоторые проблемы с выравниванием и другие подобные маленькие детали требуют дополнительной настройки, но на самом деле, это проще и легче, чем микроуправление каждой вероятной шириной. В 90% случаев, когда вы видите медиазапросы для 10-ка экранов разных размеров, вы сталкиваетесь с неспособностью использовать то, что HTML и CSS уже предоставляют нам. Вот почему «сетки из 12-ти» и бесконечные идиотские классы представления, такие как «col-4-s col-6-m col-8-l», просто неумны.

Люди часто спрашивают меня, как за полчаса я создаю макеты, на создание которых у их уходит неделя. Это потому, что я принимаю семантику, отделение презентации от контента, делаю дизайн экрана в CSS, а не использую какую-то программку рисования, и хорошо понимаю доступность, удобство использования, а также спецификации и советы, которым мы, как веб-разработчики, должны следовать. Я не стану отвлекать внимание от всей предпосылки, по которой HTML и CSS есть с идиотскими тупыми фреймворками. Тем более позволять таковой бессмысленной чепухе мешать вашему обучению и осознанию.

Пусть Flow и wrapping сделают свое дело, и у вас будет намного меньше головной боли и более резвое время разработки!

По материалам webformyself.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *