Особенности адаптивного дизайна сайта. Часть 1

Булат Гарипов
7 июля 2017 года

Суть адаптивного дизайна — автоматически подстраиваться под любой размер экрана. При этом браузеру передается один и тот же код, но расположение элементов на странице меняется в зависимости от устройства (стационарный компьютер, ноутбук или смартфон).

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

В русскоязычном интернете информация по этой теме есть, но она раздроблена и изобилует излишними техническими деталями. Попробуем понять смысл происходящего без погружения в технические дебри, а кому интересны подробности — разберутся в деталях сами.

Пиксель

Начнем с пикселей. Прежде всего, следует различать между собой физический пиксель и пиксель растрового изображения.

Физический пиксель (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 дюймов).

Разрешение экрана и виды пикселей

Что же мы видим? Размеры интерфейса совпадают, хотя размеры экранов и их разрешения отличаются! Выходит наше предположение неверно? Ответ на этот вопрос узнаем в следующей части.

Поделиться
Отправить