adaptive

Вёрстка (HTML/CSS) - адаптивная вёрстка

 

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

 

1 Принципы адаптивного дизайна:

 

• гибкость макета базируется на использовании относительных единиц измерения вместо фиксированных пиксельных значений, что позволяет регулировать ширину в соответствии с доступным пространством;

 

• гибкость текстового содержимого достигается путем вычисления размеров шрифта относительно размера шрифта;

 

• проблема гибких изображений решается с помощью правила img {width: 100%; max-width: 100%;} для всех картинок на сайте. Это правило гарантирует, что изображения никогда не будут шире, чем их контейнеры и никогда не превысят своих истинных размеров на больших экранах;

 

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

 

2 Дополнительные приёмы:

 

• масштабируемая векторная графика — используйте svg-изображения, которые масштабируются до любого размера без потери качества и хорошо выглядят на дисплеях Retina;

 

• оставьте самое необходимое — расставьте приоритеты и правильно скройте контент — используйте скрытые элементы управления, особенно для устройств с небольшими экранами. Всплывающие окна, табы, off-canvas меню и другие подобные приёмы помогут уменьшить количество элементов на странице;

 

• большое кликабельное пространство для кнопок — чем больше активная область кнопки, тем легче пользователю взаимодействовать с ней;

 

• добавьте интерактивности в свои интерфейсы — в ответ на действие пользователя создайте ответное действие — анимацию, которая будет работать при наведении на элемент на десктопных устройствах и при прикосновении к элементу на мобильных устройствах.

 

 

3 Мета-тег viewport:

 

Чтобы мобильные браузеры не изменяли автоматически размер страниц сайта, используется специальный тег <meta> с атрибутом name="viewport". В данном теге допускается устанавливать определенное значение для параметров width и initial-scale:

 

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

 

• initial-scale=1 говорит о том, что размер страницы в браузере будет равен 100% величины области просмотра. То есть, соотношение между физическим пикселем и css пикселем будет 1:1;

 

• width=device-width говорит о том, что ширина страницы будет равна 100% ширины окна любого браузера. То есть, ширина страницы сайта соответствует ширине устройства, поэтому её не надо масштабировать.

 

4 «Контрольные» точки:

 

Обычно «контрольные» точки имеют 4 варианта в зависимости от ширины экрана:

 

• 320px (375px) – 767px (мобильные устройства);

 

• 768px – 1023px (планшеты);

 

• 1024px – 1199px (десктопы);

 

• 1200px – … («большие» десктопы).

 

5 Медиа-запросы:

 

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

Медиа-запросы могут быть добавлены следующими способами:

 

• непосредственно в коде страницы:

<style>
    @media (max-width: 767px) { #sidebar {display: none;} }
</style> 

 

• внутри таблицы стилей main.css:

@media (max-width: 767px) { #sidebar {display: none;} }

 

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

 

• оператор and связывает друг с другом разные условия:

@media screen and (max-width: 600px) {/* CSS-стили */;}

 

• оператор not позволяет сработать медиазапросу в противоположном случае. Ключевое слово not добавляется в начало медиазапроса и применяется ко всему запросу целиком, т.е. запрос:

@media not all and (monochrome) {...}

7 Тип носителя:

 

Тип носителя представляет собой тип устройства, например, принтеры, экраны.

 

• all - подходит для всех типов устройств;

 

• print - предназначен для страничных материалов и документов просматриваемых на экране в режиме предварительного просмотра печати;

 

• screen - предназначен в первую очередь для экранов цветных компьютерных мониторов;

 

• speech - предназначен для синтезаторов речи.

 

8 Характеристики носителя:

 

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

 

• width - проверяет ширину области просмотра. Значения задаются в единицах длины, px, em и т.д., например, (width: 800px). Обычно для проверки используются минимальные и максимальные значения ширины. min-width применяет правило если ширина области просмотра больше значения, указанного в запросе, max-width — ширина области просмотра меньше значения, указанного в запросе;

 

• **height **- проверяет высоту области просмотра. Значения задаются в единицах длины, px, em и т.д., например, (height: 500px). Обычно для проверки используются минимальные и максимальные значения высоты. min-height применяет правило если высота области просмотра больше значения, указанного в запросе, max-height — высота области просмотра которого меньше значения, указанного в запросе.