Адаптивная вёрстка презентация

Технологии
адаптивной вёрстки
Минимальный набор технологий адаптивной вёрстки:
Относительные единицы измерения
Медиа запросы (media queries)

Единицы измерения
Относительные единицы измерения
Абсолютные единицы измерения

Относительные единицы
em – Высота шрифта от родительского элемента
rem – Высота шрифта от корневого элемента
ex – Высота символа x
px – Пиксел
% – Процент

Относительные единицы

Абсолютные единицы
in – Дюйм (1 дюйм равен 2,54 см)
cm – Сантиметр
mm – Миллиметр
pt – Пункт (1 пункт равен 1/72 дюйма)
pc – Пика (1 пика равна 12 пунктам)

Абсолютные единицы

Viewport Units
Viewport Width (vw) – процент относительно ширины окна браузера
Viewport Height (vh) – процент относительно высоты окна браузера
Viewport Minimum (vmin) – процент относительно минимальной стороны
Viewport Maximum (vmax) – процент относительно максимальной стороны

Медиа запросы
Это поддержка аппаратно-зависимых таблиц стилей, позволяющая создавать таблицы стилей для определенных типов устройств. В качестве медиа-типов (тип носителя) были определены следующие: aural, braille, handheld, print, projection, screen, tty, tv. Таким образом, браузер применял таблицу стилей только в случае, когда активизировался данный тип устройства.

Синтаксис медиа запросов
Ключевое слово: @media
Тип носителя: screen
Логический оператор: and
Медиа функция: (max-width: 500px)
@media screen and (max-width: 500px) {
/* CSS */
}

Типы носителей
all (по умолчанию) - все типы носителей
print – принтеры (версия для печати)
screen – экран монитора
braille – устройства на системе Брайля
embossed – принтеры (печать по системе Брайля)
handheld – КПК
projection – проекторы
speech – речевые синтезаторы
tty – устройства с фиксированным размером символов
tv – телевизоры

Логические операторы
and – логическое И
not – логическое НЕТ
only – "старый браузер"
, – вместо оператора ИЛИ

Ориентация экрана
@media screen and (orientation: landscape) {
/* Стили при альбомной ориентации */
}
@media screen and (orientation: portrait) {
/* Стили при портретной ориентации */
}

Плотность пикселей
@media screen and (min-device-pixel-ratio: 1.5),
screen and (min-resolution: 144dpi) {
/* Стили для экранов повышенного разрешения */
}

Брейкпоинты
Медиа-запрос ширины экрана, при котором контейнер меняет свой размер, а контент, внутри, изменяет свое расположение.

Набор брейкпоинтов
1200px – десктоп (HD)
992px – лэптоп (ноутбук)
768px – планшеты
480px – смартфоны

Retina
До оптимизации
После оптимизации

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

Retina