Суть адаптивного дизайна — автоматически подстраиваться под любой размер экрана. При этом браузеру передается один и тот же код, но расположение элементов на странице меняется в зависимости от устройства (стационарный компьютер, ноутбук или смартфон).
Для того, чтобы сделать хороший адаптивный дизайн, необходимо понимать механизм отображения сайтов на экранах различных размеров. Эта статья — попытка собрать всё в цельную систему, доступно рассказать об экранах, разрешениях, пикселях и загадочном слове вьюпорт простым языком.
В русскоязычном интернете информация по этой теме есть, но она раздроблена и изобилует излишними техническими деталями. Попробуем понять смысл происходящего без погружения в технические дебри, а кому интересны подробности — разберутся в деталях сами.
Начнем с пикселей. Прежде всего, следует различать между собой физический пиксель и пиксель растрового изображения.
Физический пиксель (physical pixel) — это ячейка матрицы экрана, которая формирует изображение.
Ячейка состоит из трех элементов — так называемая RGB-триада — и с их помощью можно получить любой цвет. На фото ниже приведен кусочек матрицы размером 5 на 5 физических пикселей (белые линии разметки нарисованы мною для удобства).
Пиксель растрового изображения — это минимальная точка определенного цвета и яркости этого же изображения.
Сразу договоримся, что под «растровым изображением» подразумеваются не только картинки, а вообще все, что мы видим на экране, например, текст, который вы сейчас читаете. Вот, например, увеличенный в 20 раз значок браузера Хром размером 24 на 24 пикселя …
… а так выглядит текст в этом браузере, тоже увеличенный в 20 раз. Цветные пиксели и нечеткие линии — результат субпиксельного сглаживания шрифта.
Также следует различать такие понятия как размер матрицы в физических пикселях и «разрешение экрана», которым называют размеры получаемого на экране изображения в экранных пикселях: например, 1280x1024 или 1920х1080 (Full HD).
Обычно пиксель экрана равен физическому пикселю матрицы — это так называемое «родное разрешение» чаще всего рекомендуется операционной системой, хотя никто не мешает выставить иное.
Для простоты будем считать, что стоит родное разрешение, то есть физический пиксель матрицы совпадает с пикселем экрана. Картинка из статьи Википедии о пикселях отлично иллюстрирует эту ситуацию (и вновь белые линии границ пикселей буквы P нарисованы мною для удобства).
Итак, на «большом» экране все просто — пиксель растрового изображения равен физическому пикселю. Сразу замечу, что это утверждение верно только для обычных, не ретиновых экранов (retina display). Пока просто запомним это словосочетание, мы еще к нему вернемся.
На смартфонах все сложнее. Для примера я выбрал два смартфона: Sony Xperia Z и Honor 4c. Оба имеют одинаковый по диагонали размер экрана в 5 дюймов. Однако у Сони разрешение экрана равно 1920x1080 (Full HD), а у Хонора — 1280x720 (HD).
Давайте сравним, как наши тестовые смартфоны покажут вот такую картинку шириной в 720 пикселей растрового изображения.
На Хоноре картинка заполнит весь экран по ширине, так как ширина картинки в 720 пикселей растрового изображения равна ширине экрана в 720 физических пикселей.
На Сони будет занята только часть экрана (720 из 1080) и изображение будет меньшего размера по сравнению с Хонором, хотя размеры экранов, повторюсь, одинаковы.
Напрашивается следующий вывод: если размеры растрового изображения привязаны к экранным пикселям, то оно будет выглядеть по-разному на разных устройствах. Например, мелко на Full HD и крупнее на HD.
Проверим это предположение. Для этого возьмем с полки планшет Nexus 7 и сравним внешний вид браузера Хром на планшете (1920x1200, 7 дюймов) и нашем смартфоне Honor 4c (1280х720, 5 дюймов).
Что же мы видим? Размеры интерфейса совпадают, хотя размеры экранов и их разрешения отличаются! Выходит наше предположение неверно? Ответ на этот вопрос узнаем в следующей части.