Разрешения экранов для адаптивной верстки
viewport - говорим с мобильным браузером и настраиваем изменение размера экрана
До того как вы начнете верстать под мобильную версию стоит вставить в шаблон сайта(в html код) строку с viewport. Эта строка вставляется в head, её задача объяснить мобильному браузеру как себя вести и как отображать сайт для вашего пользователя, к примеру данное решение растянет мобильный экран на 970 пикселей.
<meta content="width=970" name="viewport" />
А данное решение позволит экрану быть адаптивным и удобно скроильться
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=3.0, user-scalable=yes"/>
Работаем с компьютера
Для того чтобы просмотреть сайт в мобильной версии в firefox необходимо нажать ctrl+shift+m, здесь же можно посмотреть и основные разрешения экрана. Ориентироваться нужно на оба расширения экрана как на вертикальное так и на горизонтальное. Повернуть экран можно стрелочкой сбоку.
Начиная с 800 пикселей ширина может быть меньше так как в некоторых операционных системах есть возможность разместить панель слева от основного экрана. Учитывая это стоит верстать так чтобы по краям оставались поля.
Адаптивная верста без заморочек
При разработке сайта учитывайте восприятие сайта гуглом, проверить этот параметр можно тут: https://search.google.com/search-console/mobile-friendly,https://testmysite.withgoogle.com/intl/ru-ru/,https://developers.google.com/speed/pagespeed/insights/. Приложение проверяет расширение 480 пикселей, именно это расширение нужно поправить для того чтобы максимально подружиться с гуглом. Другие расширения можно не трогать.
Этот класс устройств отличает традиционно альбомная (ландшафтная) ориентация экрана, что позволяет задавать в адаптивном дизайне лишь ширину экрана для каждого разрешения.
Смартфоны
@media only screen and (min-width : 320px) and (max-width : 479px) {
/*Тут будет CSS код для разрешения 320 пикселей и до 479 пикселей*/
}
Смартфоны 2
@media only screen and (min-width : 480px) and (max-width : 639px) {
/*Тут будет CSS код для разрешения 480 пикселей и до 639 пикселей*/
}
@media only screen and (min-width : 640px) and (max-width : 767px) {
/*Тут будет CSS код для разрешения 640 пикселей и до 767 пикселей*/
}
Планшеты
@media only screen and (min-width : 768px) and (max-width : 1023px) {}
Настольные компьютеры и ноутбуки
@media only screen and (min-width : 1024px) and (max-width : 199px) {}
Настольные компьютеры и ноутбуки 2
@media only screen and (min-width : 1200px) and (max-width : 1529px) {}
Настольные компьютеры и ноутбуки 3
@media only screen and (min-width : 1530px) and (max-width : 1919px) {}
Большие экраны
@media only screen and (min-width : 1920px) {}
Адаптивный дизайн — разрешения для планшетов
Большинство планшетов способны поворачивать изображение при смене ориентации экрана с книжной на альбомную и наоборот, поэтому для каждого стандартного разрешения потребуется два различных дизайна: по большей стороне и по меньшей в качестве горизонтали.
Адаптивная верстка — разрешения для смартфонов
Современный телефон поворачивает экран при смене ориентации с портретной на ландшафтную, что приводит к необходимости создания отдельных дизайнов для каждой его ориентации. При этом дизайны для разных телефонов, даже имеющие одинаковую ширину, могут значительно отличаться. Например, iPhone 3 в горизонтальной ориентации имеет разрешение 480х320, а HTC Desire 300 в вертикальном положении имеет экран 480х800. И хотя ширина у обоих опорных дизайнов одинакова, из-за различной высоты этих экранов потребуется совершенно различный дизайн — ведь их экраны способны вместить совершенно различное количество интерфейсных элементов.
рис. Конфигурация элементов при одинаковой ширине, но различной высоте экрана
(HTC Desire 300 - 480x800, iPhone 3 - 480x320):
Вы видите, что, несмотря на одинаковую ширину экранных разрешений этих устройств в различных ориентациях, они фактически имеют разный размер: вертикальный HTC значительно уже горизонтального iPhone. Это обусловлено тем, что на 1 дюйме экрана iPhone 3 вмещает 165 пикселей, а экран HTC Desire 300 гораздо качественнее (217 пикселей/дюйм), что и приводит к этой разнице. Этот пример наглядно показывает, почему для многих ширин экрана делается по два (и иногда по 3) различных адаптивных дизайна.