Адаптивный Верстка

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

Что такое viewport? 🧐

Viewport - это видимая пользователю область веб-страницы. Т.е. это то, что может увидеть пользователь, не прибегая к прокрутке.

Размеры этой области определяются размером экрана устройства. Самую маленькую область просмотра (viewport) имеют смартфоны, размеры экранов которых колеблются от 4" до 6". А самую большую - мониторы компьютеров, размеры диагоналей которых могут превышать 24".

Назначение метатега viewport

meta viewport предназначен для того, чтобы веб-страницы отображались (выглядели) правильно (корректно) на смартфонах, планшетах и других устройствах с высокой плотностью пикселей (>200ppi).

Подключение метатега viewport к странице в большинстве случаях осуществляется так:

1<meta name="viewport" content="width=device-width, initial-scale=1">

Для адаптивного дизайна значения атрибута content viewport должно определяться 2 параметрами:

• width=device-width
• initial-scale=1

Дополнительные параметры meta viewport

Кроме основных параметров, тег meta viewport содержит много других.

Вот некоторые из них:

• minimal-scale - задаёт минимальный масштаб;
• maximal-scale - устанавливает максимальный масштаб;
• user-scalable - указывает, может ли пользователь управлять масштабом или нет.

📝Пример:

1<!-- viewport, без возможности его увеличения пользователем -->
2<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
3
4<!-- viewport, c возможностью его увеличения пользователем -->
5<meta name="viewport" content="width=device-width, user-scalable=yes">
6
7<!-- viewport, имеющий ширину 1024 пикселя -->
8<!-- Веб-страница, с фиксированным макетом (например, с шириной 1024px или меньше) будет изначально отображаться на экране мобильного просмотра без прокрутки -->
9<meta name="viewport" content="width=1024">

Медиазапросы CSS3

Медиа запросы (media queries) - это правила CSS, которые позволяют управлять стилями элементов в зависимости от значений технических параметров устройств. Иными словами, это конструкции, которые позволяют определять на основании некоторых условий какие стили необходимо использовать на веб-странице, а какие нет.

Но при создании адаптивных веб-страниц также необходимо обратить внимание на метатег viewport. Данный тег обеспечивает корректное отображение дизайнов адаптивных сайтов на экранах устройств, имеющих высокую плотность пикселей. Иными словами, он устанавливает соответствие между CSS и физическим разрешением веб-страницы. Более подробно разобраться, как работает метатег viewport можно в статье

1@media условие {
2/* стили (они будут выполняться, если устройство соответствует указанному условию)
3}

Типы устройств:

all - все устройства (по умолчанию). print - принтеры и режим предварительного просмотра страницы перед печатью. screen - устройства с дисплеями. Логические операторы:

and - требует обязательного выполнения всех указанных условий. Например:

1@media screen and (min-width: 1200px) and (orientation: landscape) { /* Стили CSS ... */ }

Стили CSS в вышеприведённом примере выполняться только в том случае, если страница будет выводиться на устройство с экраном, иметь область просмотра более 1200 пикселей в ширину, а также находиться в альбомном режиме. , (запятая) - требует обязательного выполнения хотя бы одного из указанных условий в медиа запросе.

1@media (min-width: 544px), (orientation: landscape) { /* Стили CSS ... */ }

Стили CSS в этом примере будут применяться к странице в двух случаях. Т.е. тогда, когда устройство будет иметь viewport не менее 544 пикселей (включительно) или ориентацию landscape. not - предназначен для отрицания указанного условия. Имеет по отношению к оператору and меньший приоритет, т.е. оператор not всегда выполняется после and.

1@media not screen and (orientation: portrait), (min-width: 992px) { /* Стили CSS ... */ }

Стили CSS, находящиеся в этом правиле, будут применены к странице только в том случае, если устройство не является screen и не будет иметь портретную ориентацию. А также они (стили CSS) будут применены к элементам документа ещё тогда, когда устройство (браузер) будет иметь ширину рабочей области не менее 992 пикселя (включительно). Т.е. запрос в вышеприведённом примере будет обрабатываться так:

1@media not (screen and (orientation: portrait)), (min-width: 992px) { /* Стили CSS ... */ }

Медиа функции

Для составления условия в @media можно использовать следующие функции:

width - указывает требования к ширине области просмотра устройства (браузера).

1/* применить стили CSS только для устройств с шириной области просмотра, равной 320px */
2@media (width: 320px) { /* Стили CSS ... */ }

min-width - задаёт минимальную ширину области viewport в px, em или других единицах.

1/* для устройств (браузеров), которые предоставляют для страницы минимальную ширину области просмотра, равную 544 пикселя */
2@media (min-width: 544px) { /* Стили CSS ... */ }

max-width - указывает на то, какой должна быть максимальная рабочая область устройства (браузера).

1/* стили, которые будут применены к элементам страницы с рабочей областью не больше 1199 пикселей */
2@media (max-width: 1199px) { /* Стили CSS ... */ }

height, min-height и max-height - задают требования аналогично вышеприведённым функциям, но в отношении высоты viewport.

1/* стили, которые будут применены к элементам страницы в том случае, если viewport браузера будет больше 720px в высоту */
2@media (min-height: 720px) { /* Стили CSS ... */ }

orientation - функция, которая проверяет то, в каком режиме (portrait или landscape) отображается страница. Пример, в котором в зависимости от ориентации экрана, отображается одна или другая картинка:

1/* landscape (альбомный) - это режим, в котором наоборот ширина viewport больше её высоты */
2@media (orientation: landscape) {
3  #background-image { background: url(image1.png) no-repeat; }
4}

1/* portrait (портретный) - это режим, в котором высота viewport больше ширины */
2@media (orientation: portrait) {
3  #background-image { background: url(image2.png) no-repeat; }
4}

aspect-ratio (min-aspect-ratio, max-aspect-ratio) - позволяют указать то, как ширина устройства должна относиться к высоте. В качестве значений допускается использовать только целые значения.

1/* для дисплеев с соотношением сторон 16/9 */
2@media screen and (device-aspect-ratio: 16/9) { /* Стили CSS ... */ }

1/* для дисплеев с соотношением сторон 1336/768 */
2@media screen and (device-aspect-ratio: 1336/768) { /* Стили CSS ... */ }

resolution (min-resolution, max-resolution) - указывает разрешение (плотность пикселей) устройства вывода. В качестве единиц измерения разрешения используются следующие величины: dpi (количество точек на дюйм), dpcm (количество точек на сантиметр), dppx (количество точек на пиксель).

1/* для экранов, имеющих высокую плотность пикселей (т.е. для таких, у которых отношение аппаратных пикселей к CSS не менее 2) */
2@media screen and (min-resolution: 2dppx) { /* Стили CSS ... */ }

1/* при печати с разрешением свыше 300 точек на дюйм */
2@media print and (min-resolution: 300dpi) { /* Стили CSS ... */ }

Использование медиа-запросов при подключении файлов CSS

Медиа запросы также можно применять в качестве значения атрибута media элемента link. Это позволит в зависимости от параметров устройства определить, какие файлы CSS необходимо подсоединить к странице, а какие нет. Обычно данный функционал используется тогда, когда к разным классам устройств необходимо применить различные стили CSS

1<!-- Стили xs-styles.css будут подсоединены к странице только на устройствах c шириной меньше 543 пикселей (включительно) -->
2<link rel="stylesheet" media="screen and (max-width: 543px)" href="styles-xs.css">

Кроме этого медиа запросы можно также использовать в правиле @import, которое предназначено для импортирования стилей из других файлов CSS в текущий.

1/* импортирование стилей из файла styles-xs.css в текущий файл стилей только для устройств, которые предоставляют веб-странице viewport, имеющий ширину 543 пикселя или меньше. */
2@import url(styles-xs.css) (max-width: 543px);

Практика 👩‍💻👨‍💻

Цели:

Получить навыки создания мобильной верстки страниц.

Задание

Пользуясь заданием из практики html5 адаптировать сайт под разные устройства