Адаптивный Верстка
Адаптивная верстка меняет дизайн страницы в зависимости от поведения пользователя, платформы, размера экрана и ориентации девайса и является неотъемлемой частью современной веб-разработки. Она позволяет существенно экономить и не отрисовывать новый дизайн для каждого разрешения, а менять размеры и расположение отдельных элементов.
![responsive](https://www.jbsystemsllc.com/blog/wp-content/uploads/2015/01/HiRes-1080x675.jpg)
Что такое viewport? 🧐
Viewport - это видимая пользователю область веб-страницы. Т.е. это то, что может увидеть пользователь, не прибегая к прокрутке.
Размеры этой области определяются размером экрана устройства. Самую маленькую область просмотра (viewport) имеют смартфоны, размеры экранов которых колеблются от 4" до 6". А самую большую - мониторы компьютеров, размеры диагоналей которых могут превышать 24".
Назначение метатега viewport
![](https://i.stack.imgur.com/GQDLB.jpg)
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">34<!-- viewport, c возможностью его увеличения пользователем -->5<meta name="viewport" content="width=device-width, user-scalable=yes">67<!-- 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 адаптировать сайт под разные устройства