Медиа запросы. Адаптивный веб-дизайн.

Типы носителей

Правило @media позволяет указать тип носителя, для которого будет применяться указанный стиль. В качестве типов носителя выступают следующие устройства

Синтаксис

Медиа запросы позволяют использовать особые css-стили для конкретных устройств вывода. До появления CSS3 разработчики могли подключать специальные стили для разных устройств только с помощью атрибута media тэга <link>

<link rel="stylesheet" href="print.css" media="print">
				

Все медиа-запроса начинаются с правила @media, после чего следует условие, в котором используются один или несколько типов носителя(если их более одного, то они перечисляются через запятаю) и выражение для проверки характеристик устройства, содержащее логические операторы и медиа-функции. После чего следуют обязательные фигурные скобки, внутри которых пишутся стилевые правила.

@media <тип носителя> <характеристика> {
    ....
}
				

Самый простой пример - попробуйте распечать эту старницу.
Вот пример адаптивной вёрстки и не только →

Логические операторы

Медиа запросы представляют собой логические выражения, которые могут быть истинными или ложными. Когда html-документ рендерится, браузер определяет тип носителя информации. В самом простом случаи запрос будет истинным, если указанный тип носителя соответствует типу носителя, на котором запущен браузер(при условии что нет проверки на различные характеричтики устройства). В этом случае к указанным в правиле @media селекторам применятся соответствующие css-стили.

@media screen { h1: 1.25rem; }
				

А вообще, с помощью логических операторов можно создавать комбинированные медиазапросы, в которых будет проверяться условие на соответсвие нескольким характеристикам устройства.

Медиа-функции(характеристики медианосителя)

К характеристикам медианосителя относятся проверяемые параметры устройства. Значения, которые используются при задании характеристик, являются контрольными точками.

Список проверяемых параметров устройств →

Стиль выполняется в том случае, если запрос возвращает истину, иными словами, указанные условия выполняются.

Большинство функций содержат приставку min- и max-, которая соответствуют минимальному и максимальному значению.

(min-, max-)width

Проверяет ширину области просмотра. Значения задаются в единицах длины. Обычно для проверки используются минимальные и максимальные значения ширины.

min-width применяет правило если ширина области просмотра больше значения, указанного в запросе, max-width — ширина области просмотра меньше значения, указанного в запросе.

Пример 1 →

Так, max-width: 400px означает, что ширина окна браузера меньше 400 пикселов, а min-width: 1000px, наоборот, сообщает, что ширина окна больше 1000 пикселов.

При составлении медиа запросов нужно ориентироваться на так называемые переломные точки дизайна, т.е. такие значения ширины области просмотра, в которых дизайн сайта существенно меняется, например, появляется горизонтальная полоса прокрутки. Чтобы определить эти точки, нужно открыть сайт в браузере и постепенно уменьшать область просмотра.

Чтобы адаптировать дизайн сайта под разные устройства, необходимо задать разные стили для разных разрешений экранов.

Посмотри как выглядит твой сайт на разных разрешениях →
Разрешение дисплея для мобильных устройств →

orientation

Определяет, что устройство находится в альбомном режиме (ширина больше высоты) или портретном (ширина меньше высоты).

Пример 2 →

Принимает два значения: (orientation: portrait) и (orientation: landscape).

Преимущество

Основные преимущества flexbox

• Все блоки очень легко делаются “резиновым”, что уже следует из названия “flex”. Элементы могут сжиматься и растягиваться по заданным правилам, занимая нужное пространство.
• Благодаря flexbox элементы ведут себя предсказуемо на всех типах устройств и при различных размерах экрана. Модель гибкой разметки имеет преимущества перед блочной разметкой за счет отсутствия плавающих элементов (свойство float) и отсутствия схлопывания внешних отступов margin.
• Расположение элементов в основном потоке документа не имеет решающего значения. Его можно поменять в CSS. Это особенно важно для некоторых аспектов responsive-верстки.
• Элементы могут автоматически выстраиваться в несколько строк/столбцов, занимая все предоставленное место.
• Множество языков в мире используют написание справа налево rtl (right-to-left), в отличии от привычного нам ltr (left-to-right). Flexbox адаптирован для этого. В нем есть понятие начала и конца, а не права и лева. Т.е. в браузерах с локалью rtl все элементы будут автоматически расположены в реверсном порядке.

Поддержка браузерами

Поддержка браузерами пока неполная. Виноват в этом в основном Internet explorer, который поддерживает спецификацию с 10 версии.

Концепция

Flexbox - это целый модуль, а не просто единичное свойство, он объединяет в себе множество свойств. Некоторые из них должны применяться к контейнеру (родительскому элементу, так называемому flex-контейнеру), в то время как другие свойства применяются к дочерним элементам, или flex-элементам.

Первое, что нужно сделать – это указать контейнеру display:flex или display:inline-flex.

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

Если родительский блок содержит текст или изображения без оберток, они становятся анонимными flex-элементами. Текст выравнивается по верхнему краю блока-контейнера, а высота изображения становится равной высоте блока, т.е. оно деформируется.

В модели flexbox для внутренних блоков не работают такие css-свойства, как float, clear, vertical-align. На flex-контейнер не оказывают влияние свойства column, задающие колонки в тексте.

Flexbox основывается на «направлениях flex-потока». Ознакомьтесь с этой схемой из спецификации, разъясняющей основную идею flex-лейаутов.

Одним из основных понятий в fleхbox являются оси.

• Главной осью flex-контейнера является направление, в соответствии с которым располагаются все его дочерние элементы.
• Поперечной осью называется направление, перпендикулярное главной оси.

Главная ось в ltr локали по умолчанию располагается слева направо. Поперечная – сверху вниз.

Направление главной оси flex-контейнера можно задавать, используя базовое CSS свойство flex-direction.

Свойства flex-контейнера

flex-direction

Свойство flex-direction задаёт направление основных осей в контейнере и тем самым определяет положение флексов в контейнере.

Доступные значения flex-direction:

• row - значение по умолчанию, слева направо (в rtl справа налево). Flex-элементы выкладываются в строку.
• row-reverse - направление справа налево (в rtl слева направо). Flex-элементы выкладываются в строку относительно правого края контейнера (в rtl — левого).
• column - направление сверху вниз. Flex-элементы выкладываются в колонку.
• column-reverse - колонка с элементами в обратном порядке, снизу вверх.

justify-content

Определяет, как браузер распределяет пространство вокруг флекс-элементов вдоль главной оси контейнера.

Доступные значения justify-content:

• flex-start - (значение по умолчанию) блоки прижаты к началу главной оси.
• flex-end - блоки прижаты к концу главной оси.
• center - блоки располагаются в центре главной оси.
• space-between - блоки выравниваются по главной оси, свободное место между ними распределяется следующим образом: первый блок располагается в начале flex-контейнера, последний блок – в конце, все остальные блоки равномерно распределены в оставшемся пространстве, а свободное пространство равномерно распределяется между элементами.
• space-around - все блоки равномерно распределены вдоль главной оси, разделяя все свободное пространство поровну.

align-items

Свойство align-items определяет, то как будут выравниваться флекс-элементы внутри флекс-контейнера вдоль поперечной оси.

Доступные значения align-items:

• flex-start - блоки прижаты к началу поперечной оси.
• flex-end - блоки прижаты к концу поперечной оси.
• center - блоки располагаются в центре поперечной оси.
• baseline - блоки выравниваются по базовой линии(baseline).
• stretch - (значение по умолчанию) блоки растягиваются, занимая все пространство по высоте поперечной оси, при этом учитываются min-width/max-width, если таковые заданы.

Оси и выравнивания по ним – это основы flex.

Далее мы поговорим о организации блоков внутри flex-контейнера.

flex-wrap

Все примеры, которые мы приводили выше, были построены с учетом однострочного (одностолбцового) расположения блоков. По умолчанию flex-контейнер всегда будет располагать блоки внутри себя в одну линию. Однако, спецификацией также поддерживается многострочный режим. За многострочность внутри flex-контейнера отвечает CSS свойство flex-wrap.

Свойство flex-wrap указывает, следует ли флексам располагаться в одну строку или можно занять несколько строк. Если перенос строк допускается, то свойство также позволяет контролировать направление, в котором выкладываются строки.

• nowrap - (значение по умолчанию) блоки расположены в одну линию слева направо (в rtl справа налево).
• wrap - блоки переносятся, располагаясь в несколько горизонтальных рядов (если не помещаются в один ряд) в направлении слева направо (в rtl справа налево).
• wrap-reverse - то-же что и wrap, но блоки располагаются в обратном порядке.

flex-flow

Свойство предоставляет возможность в одном свойстве задать направление главной оси и многострочность поперечной оси, т.е. сокращённая запись свойств flex-direction и flex-wrap. Значение по умолчанию flex-flow: row nowrap;.

    flex-flow: <flex-direction> || <flex-wrap>;
				

Первым параметром идёт направление flex-direction - указывает направление главной оси. Значение по умолчанию row.

Следующим параметром идёт многострочность flex-wrap - задаёт многострочность поперечной оси. Значение по умолчанию nowrap.

    flex-direction: column-reverse;
    flex-wrap: nowrap;
	
    /* Эквивалентно двух предыдущим строчкам */
    flex-flow: column-reverse nowrap;
				

align-content

Существует также свойство align-content, которое определяет то, каким образом flex-контейнер выравнивает строки на поперечной оси, при наличии свободного места. Свойство работает аналогично тому, как это делает justify-content на главной оси.

Важно: align-content работает только в многострочном режиме (т.е. в случае flex-wrap:wrap; или flex-wrap:wrap-reverse;) при указании высоты flex-контейнера.

Доступные значения align-content:

• flex-start - ряды блоков прижаты к началу flex-контейнера.
• flex-end - ряды блоков прижаты к концу flex-контейнера.
• center - ряды блоков находятся в центре flex-контейнера.
• space-between - первый ряд блоков располагается в начале flex-контейнера, последний ряд блоков блок – в конце, все остальные ряды равномерно распределены в оставшемся пространстве.
• space-around - ряды блоков равномерно распределяются по высоте, свободное пространство добавляется сверху и снизу строки.
• stretch - (значение по умолчанию) ряды блоков равномерно растягиваются, заполняя все доступное пространство.

СSS свойства flex-wrap и align-content должны применяться непосредственно к flex-контейнеру, а не к его дочерним элементам.

Свойства для дочерних элементов

flex-basis

Задает изначальный размер по главной оси для flex-блока до того, как к нему будут применены преобразования, основанные на других flex-факторах. Может быть задан в любых единицах измерения длинны (px, em, %, ...) или auto(по умолчанию). Если задан как auto – за основу берутся размеры блока (width, height), которые, в свою очередь, могут зависеть от размера контента, если не указанны явно.

Свойство позволяет задать базовую ширину flex-элемента, относительно которой будет происходить растяжение flex-grow или сужение flex-shrink элемента. Не наследуется.

flex-grow

Определяет для flex-элемента возможность «вырастать» при необходимости. Принимает безразмерное значение, служащее в качестве пропорции. Оно определяет, какую долю свободного места внутри контейнера элемент может занять.

Если у всех элементов свойство flex-grow задано как 1, то каждый потомок получит внутри контейнера одинаковый размер. Если вы задали одному из потомков значение 2, то он заберёт в два раза больше места, чем другие.

Т.е абсолютное значение flex-grow не определяет точную ширину. Оно определяет его степень “жадности” по отношению к другим flex-блокам того же уровня.

flex-shrink

Свойство указывает коэффициент уменьшения ширины flex-элемента относительно других flex-элементов, внутри flex-контейнера в случае недостатка свободного места, чтобы разместить все элементы в одну строку. По умолчанию коэффициент сжатия флексов в контейнере равен 1.

Работает только если для элемента задана ширина с помощью свойства flex-basis или width.

Коэффициент сжатия может быть как положительное целое, так и дробное число.

Короткая запись для свойств flex-grow, flex-shrink и flex-basis

Свойство представляет собой сокращённую запись свойств flex-grow, flex-shrink и flex-basis. Значение по умолчанию: flex: 0 1 auto;. Можно указывать как одно, так и все три значения свойств. Второй и третий параметры (flex-shrink, flex-basis) необязательны.

    flex-grow: 2;
    flex-shrink: 5;
    flex-basis: 150px;
	
    /* Эквивалентно предыдущим строчкам */
    flex: 2 5 150px;
				

    /* Второй и третий параметры необязательны */
    flex: 4;
				

W3C рекомендует использовать сокращённую запись, так как она правильно сбрасывает любые неуказанные компоненты, чтобы подстроиться под типичное использование.

align-self

Свойство отвечает за выравнивание отдельно взятого flex-элемента по высоте flex-контейнера. Переопределяет выравнивание, заданное align-self.

• flex-start - flex-блок прижат к началу поперечной оси.
• flex-end - flex-блок прижат к концу поперечной оси.
• center - flex-блок располагаются в центре поперечной оси.
• baseline - flex-блок выравнен по baseline.
• stretch - (значение по умолчанию) flex-блок растянут, чтобы занять все доступное место по поперечной оси, при этом учитываются min-width/max-width, если таковые заданы.

order

По умолчанию flex-элементы располагаются в исходном порядке. Тем не менее, свойство order может управлять порядком их расположения в контейнере.

Свойство определяет порядок, в котором flex-элементы отображаются внутри flex-контейнера. По умолчанию для всех flex-элементов задан порядок order: 0; и они следуют друг за другом по мере добавления во flex-контейнер. Самый первый flex-элемент по умолчанию расположен слева. Чтобы поставить любой flex-элемент в начало строки, ему нужно назначить order: -1;, в конец строки — order: 1;.

Значение order не задает абсолютную позицию элемента в последовательности. Оно определяет вес позиции элемента.

Пример 1

Пример 2

Поддержка браузерами

Как видно из статистики поддержки браузерами, свойства работают только в самых новых версиях браузеров и то не во всех. Что касается IE10+, в нём поддерживается предыдущая версия CSS Grid Layout(от 2011 года) и то только с префиксами. Так что при работе с IE будьте внимательны.

Для старых версий браузров(начиная с Firefox 47 до версии 52; Chrome с версии 49 до 56) есть возможность включить поддержку CSS Grid Layout. Для этого необходимо в Chrome включить параметр «Включить экспериментальные функции веб-платформы» (вкладка chrome://flags), а Firefox включить параметр layout.css.grid.enabled (вкладка about:config).

Основные понятия

CSS Grid – это те же таблицы, однако данный инструмент вводит несколько новых терминов, которые необходимо будет помнить при работе с сетками.

Единицы измерения fr задаёт размер свободного пространства. Распределение свободного пространства происходит только после того, как все «длины» или размеры строк и столбцов с контентом достигнут максимальных размеров.

По спецификации fr - это «Фактор гибкости» — коэффициент пропорциональности, который отталкивается от общего количество фракций в значениях.

Линии(lines)- линии отмечают границы других элементов. Они бывают как горизонтальные, так и вертикальные.

Треки(track) - это пространство между параллельными линиями.

Треки располагаются между линиями сетки (Grid Lines), которые, в свою очередь, находятся справа-слева и сверху-снизу от каждого трека.

Ячейки(cell) - строительные блоки сетки или по другому, это наименьшая единица на сетки.

Области (area) - прямоугольник из произвольного количества ячеек.

display: grid | inline-grid

Для работы с CSS Grid Layout необходимо создать родительский элемент и один или более дочерних.

Свойства column, float, clear, и vertical-align не оказывают никакого влияния на grid-контейнер

grid-template-columns
grid-template-rows

Для создания сетки контейнеру необходимо указать свойства display:grid(или display:inline-grid), а также свойства grid-template-columns и grid-template-rows, которые задают ширина колонок и строк соответственно.

Пример работы единицы измерения fr →

grid-gap

Свойство CSS являющиеся сокращенной формой свойств grid-row-gap и grid-column-gap, указывающие свободное пространство между строк и столбцов сетки grid-контейнера.

    /* Абсолютные единицы */
    grid-gap: 1cm;
    grid-gap: 10px;
	
    /* Относительные единицы */
    grid-gap: 5%;
    grid-gap: 2vw;
	
    /* Сокращёная форма записи grid-row-gap grid-column-gap  */
    grid-gap: 5% 2vw;
				

min-content
max-content
minmax()

Ещё один из способов определить ширину каждой колонки, это выставить им в качестве значения ключевые слова min-content или max-content. Как можно догадаться из их названия, они определяют размер по минимальному и максимальному содержимому колонки.

Первой колонке выставлено значение min-content, она ужимается по минимальному содержимому (в данном случае это слова «ощущением»), а вторая колонка с max-content, напротив, расширяется по максимуму, чтобы вместить всё содержимое в одну строку (т.е. все слова).

Для более гибкого управления отдельными колонками разработчики спецификации создали функцию minmax(min, max).

    grid-template-columns: 200px minmax(200px, 1fr) 200px;
				

Первое значение функции minmax() представляет минимальный размер колонки, а второе — максимальный.

Значения функции minmax() можно подставлять размеры, заданные в любых единицах длины (хоть абсолютных, хоть относительных). Так же в качестве значения можно использовать функцию calc() и значение auto.

Именованные линии

Идея именованных линий заключается в удобном и простом механизме для построения сетки при помощи направляющих.

    grid-template-columns: [first] 200px [content] minmax(200px, 1fr) [aside] 200px [last];
				

В примере выше линия «first» идёт в списке значений первой, а значит она располагается на отметке 0px. Значение 200px между ней и следующей линией (content) задает расстояние или интервал между этими линиями, а значит, ширину первой колонки. Тоже самое происходит с остальными линиями и интервалами между ними. Вторая линия (content) находится на отметке 200px, третья (aside) в диапозоне от 400px до (1fr + 200px). Последняя линия (last) находится от 600px до (1fr + 200px + 200px) - сумма ширин всех колонок.

    grid-template-columns: [first nav] 200px [content] minmax(200px, 1fr) [aside] 200px [last];
    grid-template-rows: [first header] 200px [content] 200px [footer] 200px [last];
				

Заметьте в CSS-коде, что первое значение каждого свойства состоит из двух именнованных линий (first nav) и (first header). Это означает, что значение в скобках может содержать любое количество линий, идущих через пробел.

Это может пригодиться для независимого размещения контента по ячейкам сетки, где разные именованные линии на одной отметке упрощают управление блоками grid-контейнера.

Если в виде значения для grid-template-columns/grid-template-rows мы используем именованные линии, то это значение не обязательно должно начинаться (или заканчиваться) именно с именованной линии . Мы легко можем написать так: «100px [first] 100px … [last] 100px». В этом случае ширина первой и последней колонки будет по 100px.

Как можно заметить ничего особеного не произошло при добавлении именованых линий, но это пока. Чтобы познать их особеность нужно воспользоваться следующими свойствами...

grid-column-start | grid-column-end
grid-row-start | grid-row-end

Свойства grid-column-start, grid-column-end, grid-row-start, grid-row-end обеспечивают независимое расположение блока по ячекам grid-контейнера, при этом, его положения в общем потоке элементов ни как не вляет.

Внесём небольшие изменения в таблицу стилей.

grid-template-columns: [first nav] 200px [content yandex] minmax(200px, 1fr) [aside] 200px [last];
grid-template-rows: [first header] 200px [content] 100vh [aside] 100px [footer] 200px [last];
				

С помощью именнованных линий можно легко привязать grid-блок(дочерний элемент grid-контейнера) к определённой линии колонки и строки.

grid-template-ares

CSS свойство определяющие название для областей сетки. При помощи этого свойства можно легко стоить сетку grid-контейнера, объеденяя при этом несколько ячеек в одну. Суть его работы лучше всего показать на примере.

Создадим его помощью стандартную трёх колоночную страницу с footer и header.

    grid-template-areas: "header header header"
                         "nav main aside"
                         "nav main aside"
                         "footer footer .";
				

Свойства grid-template-ares устанавливается grid-контейнеру. В качестве значения принимает шаблон из строк, идущих в кавычках через пробел. Шаблон определает количество строк и колонок в grid-контейнер и описываются области внутри него. Названия строк могут повторяться и включать в точку, указывающую как бы пустую ячейку. Если не указать точку в данном примере - то сетка порвётся.

    grid-area: header;/* для HEADER */
    grid-area: nav;/* для NAV */
    .....
    grid-area: footer;/* для FOOTER */
				

Повторение колонок и рядов

repeat() - функция введёная в CSS Grid Layout. При помощи этой функции можно создавать повторяющиеся трэки, обладающие определённой закономерностью.

    grid-template-columns: 100px 100px 100px 100px 100px 250px ;
    /* Идентично следующему */
    grid-template-columns: repeat(5, 100px) 250px;
				

В качестве примера создадим сетку 4(колонки) на 4(строчки).