Содержание
Размеры экранов для адаптивной верстки
by АлексейОпубликовано
С каждым годом трафик с мобильных устройств растет и со временем превысит его. Уже сейчас, одним из требованием в ТЗ на разработку сайта является адаптивный дизайн под разные типы устройств. Поэтому до сборки сайта нужно подумать о представлении контента таким образом, чтобы он был ориентирован и на мобильную аудиторию.
Адаптивные дизайны (responsive designs) адаптируются к различным размерам экрана, чтобы обеспечить подходящее отображение для различных видов устройств, таких как мобильные телефоны или планшеты.
При создании адаптивного дизайна важно с самого начала определиться, на какие устройства и размеры экранов ориентирован разрабатываемый сайт. Мы должны выбрать устройства для адаптивной верстки: компьютеры, ноутбуки, планшеты и смартфоны. Кроме того, в пределах диапазонов ширин экранов для каждого из выбранного класса устройств мы должны определить, как будет работать адаптивная верстка – какие разрешения учитывать, а какие пропустить.
Существует довольно большое многообразие возможных форматов экранов для каждого из видов устройств, но это не значит, что вы должны обязательно использовать их все. Достаточно выбрать лишь несколько наиболее распространённых форматов экранов для адаптивной вёрстки.
Вот несколько сниппетов для адаптивной верстки, в котором расписаны наиболее распространенные размеры дисплеев:
- Смартфоны (Портрет и ландшафтный)
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {} - Смартфоны (ландшафтный)
@media only screen and (min-width : 321px) {} - Смартфоны (portrait)
@media only screen and (max-width : 320px) {} - iPads (Портрет и Ландшафтный)
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {} - iPads (Ландшафтный)
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {} - iPads (Портрет)
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {} - Настольные компьютеры и ноутбуки
@media only screen and (min-width : 1224px) {} - Большие экраны
@media only screen and (min-width : 1824px) {} - iPhone 4
@media only screen and (-webkit-min-device-pixel-ratio : 1.
5),only screen and (min-device-pixel-ratio : 1.5) {}
5),only screen and (min-device-pixel-ratio : 1.5) {}Для тестирования разрабатываемого сайта можно воспользоваться web-сервисами:
- http://mattkersley.com
- http://www.responsinator.com
- @media only screen – только для экранов монитора;
- min-width – условие “истина”, когда ширина окна браузера больше установленного значения;
- max-width – условие “истина”, когда ширина окна браузера наоборот меньше установленного значения;
- min-device-width – условие “истина”, когда размер экрана устройства больше установленного значения;
- max-device-width – условие “истина”, когда размер экрана устройства меньше установленного значения;
Posted in CSS, HTMLПомеченные css, адаптивная верстка
Размеры экранов для адаптивной верстки
Главная / Курсы веб-дизайна / Размеры экранов для адаптивной верстки
youtube.com/embed/tzUl-13GBgg?list=PLettrGtkBMerDELB4Qcd-5oJ3Ib324mu4&showinfo=0″ frameborder=»0″ allowfullscreen=»allowfullscreen»/>
Основные размеры экранов для адаптивной верстки
Вообще вопрос в том, какой размер экрана для адаптивной верстки стоит учитывать при создании интерфейса мобильного приложения.
Существует огромное количество размеров экранов мобильных телефонов и планшетов (рис.1). У них разные диагонали, разное PPI (плотность пикселей), это все несет ряд проблем дизайнерам и разработчикам.
Рис.1 Размеры экранов и PPI
Но есть пропорции у всех этих разрешений. И как раз от пропорций мы можем отталкиваться. И в первую очередь стоит определить для себя какое соотношение сторон будет у вашего приложения (рис.2).
Рис.2 Пропорции экрана
Как определить размеры экранов для адаптивного дизайна?
Строго говоря, вам нужно взять размеры для адаптивного дизайна по следующем списку:
- Размеры своего устройства и устройства клиента, чтобы вы могли сразу закачать картинки себе на телефон и сразу протестировать свой дизайн непосредственно в руках.
- Размеры флагмана. Нужно сделать адаптивный дизайн под топовый телефон, под самый популярный телефон, который сейчас продается. Если говорить про сегодняшний день, то флагманом среди iPhone будет iPhone 8/8 Plus и iPhone X. Под эти размеры экрана нужен адаптивный дизайн.
- Адаптация под самое большое разрешение, чтобы все хорошо работало
- Адаптация под самое маленькое разрешение. Под самое маленькое, адекватно нужное разрешение.
Если мы говорим про iOS, то самое большое разрешение сейчас у iPhone 8 plus — 1920х1080, самое маленькое iPhone 4. И вы обязательно должны это в дизайне учитывать. Обязательно нарисовать четвертый iPhone посмотреть, какой у него размер, и прикинуть, как будет выглядеть дизайн на уменьшенном размере экрана (рис.3).
Рис.3 Размеры экрана iPhone
Кстати, рекомендую посмотреть прямо сейчас:
Если мы говорим про Андроид, в том числе про Samsung, то сейчас в топе серия Galaxy, у Ace размер экрана 480х320 и тоже будет интересно посмотреть, как будет смотреться дизайн в маленьком разрешении.
Рис.4 Размеры экрана Samsung
Тестировать картинки удобно через Дропбокс (рис.5)
- Рисуем макет под разрешение вашего телефона
- Храним картинки на компьютере в папке Дропбокса
- Открываем эти картинки на телефоне через мобильное приложение Дропбокс.
Рис.5 Дропбокс
То есть у нас есть рабочая панель, папка с проектами (картинками) и она очень просто переносится вам в телефон по облаку (рис.6). Дальше мы кликаем в картинку и если она нарисована для нашего разрешения, то мы можем видеть в реальном времени как это все выглядит. Есть разумеется хитрые программы, которые позволяют это делать. На мой взгляд это самый простой и быстрый способ посмотреть как ваш дизайн выглядит на мобильных устройствах. Их можно перекинуть, можно очень быстро с ними работать. Вы только сохранили файл и он уже доступен в вашем айфоне. И это бесплатно. Разумеется это может быть не только Дропбокс, но и любой другой облачный сервис ( mail,yandex и т.
д.).
Рис.6 Работа с Дропбокс ( dropbox.com)
И какое здесь правило, принцип?
Дизайн, которые вы делаете, должен на новых устройствах выглядеть идеально, на старых — работоспособно. Исходя из этого и вычисляйте размеры экранов для адаптивной верстки.
медиа-запросов CSS: ширина по сравнению с шириной устройства
ширина против ширины устройства
В СМИ CSS разница между шириной и
device-width
device-width
словами, разрешение экрана устройства. Допустим, ваш экран
разрешение 1440 x 900. Это означает, что экран имеет ширину 1440 пикселей, поэтому
имеет ширину устройства из 1440 пикселей. Большинство мобильных телефонов имеют
ширина устройства 480 пикселей или меньше, включая популярный iPhone 4
(с шириной устройства: 320 пикселей), несмотря на то, что технически он имеет разрешение 640 x 960.
Это связано с дисплеем Retina в iPhone 4, который вмещает в себя два пикселя устройства.
каждый пиксель CSS на экране. Это верно и для Ipad 3; его
сообщил
ширина устройства составляет 768 пикселей, как и его предшественники, хотя его фактическая
разрешение экрана 1536х2048 пикселей. В общем ширина более универсальный
когда дело доходит до создания адаптивных веб-страниц, полезно использовать ширины устройства .
когда вы хотите специально настроить таргетинг на мобильные устройства (а не на настольные компьютеры с
маленькое окно браузера, например), так как настольные компьютеры редко имеют экран
разрешения ниже определенного числа, например 320 x 480 пикселей.
Ниже показано разрешение экрана и размеры мультимедийного устройства CSS для некоторых популярных устройств.
там:
| Устройство | (пкс) | ширина устройства/высота устройства (px) |
|---|---|---|
| Айфон | 320 х 480 | 320 x 480, как в книжной, так и в альбомной ориентации |
| iPhone 4 | 640 х 960 | 320 x 480, как в портретном, так и в ландшафтном режиме. |
| iPhone 5, 5s | 640 х 1136 | 320 x 568, как в портретном, так и в ландшафтном режиме. |
| iPhone 6 | 750 х 1334 | 375 x 667, как в портретном, так и в ландшафтном режиме. отношение пикселей устройства равно 2 |
| iPhone 6 плюс | 1242 x 2208 | 414 x 736, как в портретном, так и в ландшафтном режиме. отношение пикселей устройства равно 3 |
| iPad 1 и 2 | 768 х 1024 | 768 x 1024, как в книжной, так и в альбомной ориентации |
| iPad 3 | 1536 х 2048 | 768 x 1024, как в книжной, так и в альбомной ориентации CSS |
| Samsung Galaxy S I и II | 480 х 800 | 320 x 533, в портретном режиме Плотность пикселей CSS 1,5 |
| Samsung Galaxy SIII | 720 х 1280 | 360? x 640?, в портретном режиме |
| HTC Evo 3D | 540 х 960 | 360 x 640, портретный режим Плотность пикселей CSS 1,5 |
| Amazon Kindle Fire | 1024 х 600 | 1024 x 600, ландшафтный режим |
Просто
чтобы еще больше усложнить ситуацию, в устройствах iPhone и iPad ширина устройства
всегда соответствует ширине устройства в портретном режиме , независимо от того, находится ли устройство в этом режиме или ландшафтном
вместо.
С другими устройствами его ширина устройства изменяется в зависимости от его
ориентация.
* Для
более полный список устройств и разрешений их экранов см.
эта страница.
Давайте теперь посмотрим еще несколько медиа-запросов CSS, которые захватывают
различные устройства и размеры экрана:
/* #### Мобильные телефоны Книжная #### */
@media screen and (max-device-width: 480px) и (ориентация: портретная){
/* немного CSS здесь */
}
/* #### Мобильные телефоны Альбомная ориентация #### */
@media screen и (max-device-width: 640px) и (ориентация: альбомная){
/* здесь немного CSS */
}
/* #### Мобильные телефоны Книжная или альбомная ориентация #### */
@media screen and (max-device-width: 640px){
/* здесь немного CSS */
}
/* #### iPhone 4+ Книжная или Альбомная #### */
@media screen and (min-device-width: 320px) and (-webkit-min-device-pixel-ratio :
2){
/* здесь немного CSS */
}
/* #### iPhone 5, портретная или альбомная ориентация #### */
@media (высота устройства: 568 пикселей) и (ширина устройства: 320 пикселей) и (-webkit-min-device-pixel-ratio:
2){
/* здесь немного CSS */
}
/* #### iPhone 6 и 6 плюс портретная или альбомная ориентация #### */
@media (min-device-height: 667px) и (min-device- ширина: 375 пикселей) и (-webkit-min-device-pixel-ratio:
3){
/* здесь немного CSS */
}
/* #### Планшеты Книжная или Альбомная #### */
@media screen and (min-device-width: 768px) and (max-device -width: 1024px){
/* здесь немного CSS */
}
/* #### Desktops #### */
@media screen and (min-width: 1024px){
/* здесь немного CSS */
}
Итак, теперь у нас есть довольно хорошее представление об использовании медиазапросов CSS.
Однако,
есть еще одна важная часть головоломки, которая нам нужна для того, чтобы
все работает как положено, и это вьюпорт мета
ярлык.
- Введение в мультимедийные запросы CSS
- по сравнению с шириной устройства
- Метатег области просмотра — ключ к
подготовка страницы для оптимизации мобильных устройств - Сопоставление медиа-запроса CSS в
JavaScript с использованием window.matchMedia()
Ширина
Метатег окна просмотра — ключ к
подготовка страницы для оптимизации мобильных устройств
Как пиксели соотносятся с размером экрана в CSS
спросил
Изменено
1 год, 2 месяца назад
Просмотрено
255 раз
Если установить ширину div на 450px.
Что произойдет с div на меньшем экране, скажем, телефона или планшета??
1
Вкратце: если вы используете , это зависит от DPI (точек на дюйм) экрана.
Из спецификации CSS:
1 пиксель = 1/96 часть 1 дюйма
и из Mozilla Docs по спецификации CSS 2.1:
Если плотность пикселей устройства вывода сильно отличается от плотности типичного дисплея компьютера, пользовательский агент должен изменить масштаб значений пикселей. Рекомендуется, чтобы единица пикселя относилась к целому количеству пикселей устройства, которое наилучшим образом соответствует эталонному пикселю. Рекомендуется, чтобы опорным пикселем был угол обзора одного пикселя на устройстве с плотностью пикселей 96 точек на дюйм и на расстоянии вытянутой руки от читателя.
Пиксель CSS на самом деле является отдельной единицей измерения и не относится к пикселям, которые вы видите.
Если ваш сайт с элементом div размером 450 пикселей представляет собой стандартную HTML-страницу, и вы просматриваете ее на телефоне (в книжной ориентации) и на настольном мониторе (скажем, 1920×1080), вы заметите, что на телефоне элемент div занимает больше места на экране, а на рабочем столе он занимает меньше места.
Я думаю, что это видео делает довольно приличную работу по объяснению этого.
Если вы не используете 1px близко соответствует 1px.
Вы можете проверить это сами, открыв эти две страницы на телефоне:
Набор метатегов ширины устройства просмотра
Метатег ширины окна просмотра НЕ установлен
Пиксель равен 1/96 дюйма. Однако дюйм в этом контексте не обязательно соответствует физическому дюйму.
Согласно спецификации CSS, на физическом носителе, таком как печатная бумага, меры должны быть привязаны к физической мере, такой как дюйм или сантиметр, и все остальные меры будут относительными к ним.