Полезные статьи

[rva]

Один мой друг часто шутил, что

HTML уже является адаптивным. Дизайнеры — это те, кто все портит.​

Странное мнение, но в основном правильное. Если вы пишете обычный HTML с правильной семантической разметкой, поток и естественное поведение переноса дают вам страницу, которая, по крайней мере, ПРИГОДНА к ИСПОЛЬЗОВАНИЮ на каждом отдельном существующем пользовательском интерфейсе. Это некрасиво, возможно, это не самая желанная вещь для тех, кто смотрит на экран, но она доступна.

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

Flex-wrap дает нам ту же возможность, но объявление ширины для переноса было немного сложным, пока не появились вычисления CSS. CALC, MIN и MAX дают нам возможность переопределять значения таким образом, что перенос автоматически удаляет столбцы, которые не помещаются.

Допустим, у нас есть внешний контейнер с именем «div.content», внутри которого находится наш элемент MAIN, а также два дополнительных раздела, которые мы хотим использовать в качестве эластичных боковых панелей. ДА, DIV НЕ В СТОРОНЕ!!!

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

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

Контейнер установим flex и flex-wrap.

.content {
  display:flex;
  flex-wrap:wrap;
}

MAIN установим ширину в процентах и некоторую «волшебную» минимальную ширину.

main {
  width:50%;
  min-width:min(36em, 100%);
}

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

.extras {
  min-width:min(12em, 100%);
}

Они откажутся уменьшаться при ширине экрана более чем на 12em, в зависимости от того, что меньше.

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

Живой пример:​

Вот codepen с полным рабочим макетом:

https://codepen.io/jason-knight/pen/rNzReyY

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

Вывод​

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

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

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

Перевод статьи
https://medium.com/codex/responsive-layouts-without-media-queries-5d7fd989be72