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

САЙТЫ, которые ПРОДАЮТ!
(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, Samsung Galaxy Note 3, Nokia Lumia 1520, Sony Xperia Z1, Sony Xperia Z2, Sony Xperia Z Ultra, HTC One, HTC One MAX, HTC One M8
1440х2560, 2560х1440
LG G3, Samsung Galaxy S6

Современный телефон поворачивает экран при смене ориентации с портретной на ландшафтную, что приводит к необходимости создания отдельных дизайнов для каждой его ориентации. При этом дизайны для разных телефонов, даже имеющие одинаковую ширину, могут значительно отличаться. Например, 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) различных адаптивных дизайна.

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

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

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

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

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

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

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

 

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

 

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

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

Тестирование сайтаТестирование ресурса необходимо разделить на три крупные части: это «тестирование вёрстки» (о котором мы уже говорили в отдельном разделе), «технологическое тестирование» и «пользовательское тестирование».

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

Эконом-проектыЕсли вы только начинаете свой интернет-бизнес, мы можем провести для вас недорогие стартовые проекты по созданию сайтов. Так, экспресс-сайт для быстрого создания представительства в интернет обойдётся в 12000 рублей, а бюджетный продающий сайт под ключ вполне может уложиться менее, чем в 50 тысяч.

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

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

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

Сделать сайт под ключ в МосквеПри разработке продающего ресурса требуется плотная совместная работа заказчика и разработчика, при личном участии обеих сторон. Мы - одна из немногих компаний, работающих таким образом.

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

Как заказать создание сайта?Web студия IMHO DESIGN оказывает услуги по созданию и продвижению сайтов, делая основной упор на интернет-маркетинг и финансовую эффективность производимых ресурсов.

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