Адаптивные макеты без медиа-запросов!
Естественное обертывание традиционных элементов часто может быть лучше, если мы просто позволим ему делать свое дело. Даже по сравнению с такими вещами, как grid-template, потому что нам не нужно микроуправлять всеми нашими контрольными точками медиа-запросов.
Flex-wrap дает нам ту же возможность, но объявление ширины для переноса было немного сложным, пока в CSS не появились вычисления. CALC, MIN и MAX дают нам возможность переопределять значения таким образом, чтобы выполнять автоматическую обертку столбцов, которые не подходят. Допустим, у нас есть внешний контейнер с именем div.content который содержит MAIN, а также два DIV.extra, которые мы хотим использовать в качестве эластичных sidebar–ов.
ЕСЛИ вы используете ASIDE, чтобы сказать, что хотите отодвинуть блок в сторону, вы используете их в такой же презентационной манере, как и CENTER. HTML-теги следует выбирать в соответствии со структурой и грамматикой. Единственная грамматическая / структурная причина для aside — литературная, например, в произведениях Шекспира или актеров, «ломающих четвертую стену», таких как Феррис Бьюллер или Дэдпул. Если это не «необязательный подраздел, относящийся к основному содержанию» — это НЕ aside. Этот раздел курсивом? ЭТО aside!
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
<div class=”Content”> <main> <p> Main Content HEre </p> </main> <div class=”extras”> Extra Content #1 <!– .extras –></div> <div class=”extras”> Extra Content #1 <!– .extras –></div> <!– .content –></div>
| 12345678910111213 | <div class=”Content”> <main> <p> Main Content HEre </p> </main> <div class=”extras”> Extra Content #1 <!– .extras –></div> <div class=”extras”> Extra Content #1 <!– .extras –></div><!– .content –></div> |
Теперь предположим, что мы хотим, чтобы основной столбец имел минимальную ширину 48em, а наши sidebar-ы имели минимальную ширину 16em, но мы хотим, чтобы автоматически переносились, а при обертывании расширялись по размеру. Присвоим контейнеру свойства flex и flex-wrap.
CSS .content { display:flex; flex-wrap:wrap; }
| 1234 | .content { display:flex; flex-wrap:wrap;} |
Для MAIN присвоим процентную ширину и некоторую магическую минимальную ширину.
CSS main { width:50%; min-width:min(36em, 100%); }
| 1234 | main { width:50%; min-width:min(36em, 100%);} |
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
50% гарантирует, что контейнер вырастет достаточно, чтобы вместить столбцы. Магия в вычислении min-width:min. Он либо окажется размером меньше 36em, либо займет 100% доступного пространства, в зависимости от того, что меньше. Тогда ВСЕ что нам нужно – это .extra:
CSS .extras { min-width:min(12em, 100%); }
| 123 | .extras { min-width:min(12em, 100%);} |
Ширина контейнера будет приближатся к 12em или к ширине экрана, в зависимости от того, что меньше. Таким образом, когда ширина 36em + 12em + 12em == 60em, наши компоненты уместятся рядом. Если вы сделаете это, последние столбцы будут обернуты, чтобы освободить место, где и как нужно. Поскольку мы используем только минимальную ширину в качестве элемента управления, компоненты будут расширяться, чтобы заполнить контейнер, когда они действуют как один столбец. Приведу пример кода:
Я добавил несколько дополнительных вещей, так что это полный макет, используя min() и VW для создания автоматически уменьшающихся отступов / полей, чтобы лучше использовать доступное пространство на экране по мере того, как компоненты становятся меньше.
Заключение
Это мощный, но простой метод, который действительно может улучшить ваш UI, когда дело доходит до адаптивного дизайна. Безусловно, некоторые проблемы с выравниванием и другие подобные мелкие детали требуют дополнительной настройки, но на самом деле, это проще и легче, чем микроуправление каждой возможной шириной. В 90% случаев, когда вы видите медиазапросы для десятка экранов разных размеров, вы сталкиваетесь с неспособностью использовать то, что HTML и CSS уже предоставляют нам. Вот почему «сетки из двенадцати» и бесконечные идиотские классы представления, такие как «col-4-s col-6-m col-8-l», просто глупы.
Люди часто спрашивают меня, как за полчаса я создаю макеты, на создание которых у них уходит неделя. Это потому, что я принимаю семантику, отделение презентации от контента, делаю дизайн экрана в CSS, а не использую какую-то программу рисования, и хорошо понимаю доступность, удобство использования, а также спецификации и рекомендации, которым мы, как веб-разработчики, должны следовать. Я не стану отвлекать внимание от всей причины, по которой HTML и CSS существуют с идиотскими тупыми фреймворками. Тем более позволять такой бессмысленной чепухе мешать вашему обучению и пониманию.
Пусть Flow и wrapping сделают свое дело, и у вас будет намного меньше головной боли и более быстрое время разработки!
Автор: Jason Knight
Источник: webformyself.com