Главная / Адаптивные сайты / Адаптивная верстка сайта - разрешения

САЙТЫ, которые ПРОДАЮТ!
(965) 368 - 44 - 43
info@imho-design.ru

Устройства и разрешения для адаптивной вёрстки

адаптивный дизайн разрешения

При создании адаптивного дизайна важно с самого начала определиться, на какие устройства и размеры экранов ориентирован разрабатываемый сайт. Вместе с Вами мы должны выбрать устройства для адаптивной верстки: компьютеры, ноутбуки, планшеты и смартфоны. Кроме того, в пределах диапазонов ширин экранов для каждого из выбранного класса устройств мы должны определить, как будет работать адаптивная верстка – какие разрешения учитывать, а какие пропустить. Существует довольно большое многообразие возможных форматов экранов для каждого из видов устройств, но это не значит, что вы должны обязательно использовать их все. Достаточно выбрать лишь несколько наиболее распространённых форматов экранов для адаптивной вёрстки.

Адаптивная верстка сайта — разрешения для мониторов и ноутбуков

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

800х600
нетбуки 10-11 дюймов
1024x768
нетбуки 13-14 дюймов
1280x800
ноутбуки 15 дюймов
1680x1050
монитор 21-22 дюйма, большие ноутбуки
1920x1080
монитор 24 дюйма
2560x1440
монитор 30 дюймов
3840x2160
монитор 31 дюйм

Адаптивный дизайн — разрешения для планшетов

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

600x800, 800x600
Ritmix RMD-825, 3Q Qoo! Q-pad, Texet TB-823A
768х1024, 1024x768
Apple iPad mini, Acer Iconia Tab
768x1366, 1366x768
ASUS Transformer Book, Samsung ATIV Smart, Acer Aspire
800х1280, 1280x800
Acer Iconia Tab A3, ASUS MeMO Pad, ASUS Nexus 7, Lenovo Yoga Tablet, Lenovo Idea Tab, Samsung Galaxy Tab, Sony Xperia Tablet
1080x1920, 1920x1080
Nokia Lumia 2520, Microsoft Surface, Samsung ATIV Smart, Lenovo ThinkPad, Acer Iconia Tab W700
1536x2048, 2048x1536
Apple iPad
1600x2560, 2560x1600
ASUS Transformer Pad, Samsung Galaxy Tab Pro

Адаптивная верстка — разрешения для смартфонов

240х320, 320х240
Nokia 225, Nokia Asha 230, Nokia 220, Samsung Galaxy Pocket, Samsung GT-C3590, HTC WildFire, HTC Touch2
320х480, 480х320
Samsung Galaxy S II, Samsung Galaxy Fame, Samsung Galaxy Young, Samsung Rex, Samsung Galaxy Pro, Nokia X6, Nokia E7, HTC Legend, HTC Salsa, HTC Hero, Apple iPhone 3
480х800, 800х480
Samsung Galaxy S III mini, Samsung Galaxy Golden GT, Samsung Galaxy Grand Neo, Nokia Lumia, Nokia X, Nokia XL, HTC Desire 300-500
540х960, 960х540
Samsung Galaxy Core, Samsung Galaxy S4 mini, HTC Desire 600-700, HTC One S, HTC Sensation XE, Sony Xperia
640х1136, 1136х640
Apple iPhone 4, Apple iPhone 5
720х1280, 1280х720
Samsung Galaxy S III, Samsung Galaxy Note, Samsung Galaxy Grand, Nokia Lumia 900+, Sony Xperia T2 Ultra, Sony Xperia Z1 Compact
750х1334, 1334x750
iPhone 6
1080х1920, 1920х1080
Samsung Galaxy S4, Samsung Galaxy S5, Apple iPhone 7 Plus, Apple iPhone 8, Samsung Galaxy Note 3, Nokia Lumia 1520, Sony Xperia Z1, Sony Xperia Z2, Sony Xperia Z Ultra, Sony Xperia Z3, HTC One, HTC One MAX, HTC One M8
1125х2435, 2436х1125
Apple iPhone X
1440х2560, 2560х1440
LG G3, Samsung Galaxy S6
1440х2880, 2880х1440
LG V30, LG G6, Google Pixel 2 XL
1440х2960, 2960х1440
Samsung Galaxy S8
2160х3840, 384х2160
Sony Xperia Z5

Современный телефон поворачивает экран при смене ориентации с портретной на ландшафтную, что приводит к необходимости создания отдельных дизайнов для каждой его ориентации. При этом дизайны для разных телефонов, даже имеющие одинаковую ширину, могут значительно отличаться. Например, iPhone 3 в горизонтальной ориентации имеет разрешение 480х320, а HTC Desire 300 в вертикальном положении имеет экран 480х800. И хотя ширина у обоих опорных дизайнов одинакова, из-за различной высоты этих экранов потребуется совершенно различный дизайн — ведь их экраны способны вместить совершенно различное количество интерфейсных элементов.

рис. Конфигурация элементов при одинаковой ширине, но различной высоте экрана
(HTC Desire 300 - 480x800, iPhone 3 - 480x320):

HTC Desire 300
iPhone 3

Вы видите, что, несмотря на одинаковую ширину экранных разрешений этих устройств в различных ориентациях, они фактически имеют разный размер: вертикальный HTC значительно уже горизонтального iPhone. Это обусловлено тем, что на 1 дюйме экрана iPhone 3 вмещает 165 пикселей, а экран HTC Desire 300 гораздо качественнее (217 пикселей/дюйм), что и приводит к этой разнице. Этот пример наглядно показывает, почему для многих ширин экрана делается по два (и иногда по 3) различных адаптивных дизайна.

В рамках разработки адаптивных сайтов мы делаем весь комплекс работ: дизайн, вёрстку, всё необходимое программирование. Читайте подробнее материалы по теме:

Адаптивный дизайн сайта
(чем подход к дизайну адаптивного сайта отличается от обычного дизайна)

Адаптивная вёрстка сайта
(какие бывают типы адаптивной вёрстки, живые примеры)

Адаптивное меню для сайта
(как может изменяться меню для адаптивного сайта, примеры)

Фиксированная вёрстка сайта

Резиновая вёрстка сайта

Стоимость адаптивного сайта

 

Другие материалы:

 

Засилье «дизайна»Суть у таких проектов одна — «наворотить», «надизайнить» побольше, поразить заказчика «художественностью», совершенно не заботясь о его деньгах и успешности его бизнеса, а только о «крутости» его сайта, ведь для неискушённого заказчика отвергать такие красивые проекты всегда ох как сложно и жалко...

подробнее>>>

Веб дизайн сайтаКакие главные требования предъявляются в веб дизайну сайтов, предназначенных для продажи в интернете, и какой дизайн для них хорош, а какой не уместен, и почему.

подробнее>>>

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

подробнее>>>

Техническое заданиеПравильнее было бы говорить о «технических заданиях», поскольку, в зависимости от специфики проекта, их может быть несколько. Самое распространённое из всех ТЗ – «Задание на дизайн».

подробнее>>>

Какой дизайн сайта заказать?Вы можете выбрать любой тип дизайна сайта - художественный, 3D, плоский или объёмный, но какой бы дизайн вы ни выбрали, всегда старайтесь сделать ваш сайт как можно проще и легче для восприятия.

подробнее>>>

Как создаются прибыльные сайты?Обычный сайт отличается от бизнес-сайта также, как модель от реально работающего механизма: и тут и там присутствует весьма схожая внешность при полном различии во внутреннем содержании, а главное – модель не работоспособна. Что же нужно для того, чтобы создать реально работающий интернет-механизм по добыванию денег?

подробнее>>>