adaptive

Вёрстка (HTML/CSS)

адаптивная вёрстка

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

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

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

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

---

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

масштабируемая векторная графика

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

<img src="http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg"
     width="100%">

приоритеты

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

кликабельное пространство

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

интерактивность интерфейса

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

---

Мета-тег viewport

Мобильные браузеры по-умолчанию отображают обычные страницы:

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

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

В данном теге допускается устанавливать определенное значение для параметров width и initial-scale:

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

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

В следующем варианте запрещается также любое масштабирование, в том числе и масштабирование пользователем:

<meta name="viewport" 
      content="width=device-width, 
               initial-scale=1.0, 
               maximum-scale=1.0, 
               user-scalable=no"
>

Возможные параметры для мета-тега viewport

Атрибут	Возможное значение	Описание
width	Целое неотрицательное значение ( от 200px — 10,000px ) или константа device-width	Определяет ширину viewport Если ширине не указана, в мобильном Safari устанавливается значение 980px, в Opera — 850px, в Android WebKit — 800px, а в IE — 974px
height	Целое неотрицательное значение ( от 223px до 10,000px ) или константа deviceheight	Определяет высоту viewport В большинстве случаев на этот атрибут можно не обращать внимание
initial-scale	Число с точкой ( от 0.1 до 10 ) Значение 1.0 — не масштабировать	Определяет начальный масштаб страницы Чем больше число, тем выше масштаб
user-scalable	no или yes	Определяет, может ли пользователь изменять масштаб в окне По-умолчанию "yes" в мобильном Safari
minimum-scale	Число с точкой ( от 0.1 до 10 ) 1.0 — не масштабировать	Определяет минимальный масштаб viewport По-умолчанию "0.25" в мобильном Safari
maximum-scale	Число с точкой ( от 0.1 до 10 ) 1.0 — не масштабировать	Определяет максимальный масштаб viewport По-умолчанию "1.6" в мобильном Safari

---

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

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

• 320px (375px) – 767px (мобильные устройства)
• 768px – 1023px (планшеты)
• 1024px – 1199px (десктопы)
• 1200px – … («большие» десктопы)

---

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

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

Из всех характеристик чаще всего проверяется ширина устройства width

Медиа-запрос является логическим выражением, которое возвращает истину или ложь

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

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

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

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

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

---

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

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

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

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

@media not all and (monochrome) {/* CSS-стили */;}

---

Тип носителя

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

• all - подходит для всех типов устройств
• print - предназначен для страничных материалов и документов, просматриваемых на экране в режиме предварительного просмотра печати
• screen - предназначен в первую очередь для экранов цветных мониторов
• speech - предназначен для синтезаторов речи

---

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

К характеристикам медианосителя относятся проверяемые параметры устройства

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

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