Сознаюсь честно, давно уже назревал этот пост о том какие размеры экранов нужно учитывать при адаптивной верстке. Назревал этот пост по той причине, что я и сам будучи начинающим Frontend разработчиком не до оконца понимал какие размеры экранов нужно учитывать.
С опытом я пришел к тому, какие размеры являются правильными, чем собственно я сегодня очень активно пользуюсь.
Одно что очень сильно изменилось за несколько последних лет, это введение нового принципа Mobile first, который подразумевает, что сначала мы должны делать и оптимизировать верстку для мобильных, а уже потом она должна подстраиваться под tablet и desctop версии.
Сначала я не понимал зачем это все, ведь итак подстраивается, но как показало время и наработки – для адаптации под мобильные, браузер требует больше времени.
На какие размеры экранов нужно уделить больше внимания?
Осознать такие мелочи было для меня чем-то вроде уже понятным давно, но совершенно новым. Браузер ведь проделывает ну очень много работы для того, чтобы показать тебе красивый сайт. Сначала мы скачиваем стили, а после нужно все классы, которые есть в html связать с теми, которые в этом самом css файле.
Причем вспоминая о том, что я и лично генерировал такие файлы у которых было и 50 тысяч строк css кода. На поиск нужно потратить время, а после оказывается еще есть и разные дисплеи и их тоже нужно связать. Это все доли секунд, но конкуренция в интернете точнее в поисковых системах привязывает правила, которые нужно соблюдать всем.
Кстати, бывают случаи когда файлы css большие только потому, что в них много css, который вообще не используется. В таких случаях нужно удалить лишний css.
Но меньше всего времени требуется для того, чтобы определить первые стили, а учитывая, что интернетом пользуются на мобильных устройствах, причем более 65% пользователей то понятно, что мобильные устройства — это приоритет.
С какими размерами экранов нужно работать для адаптивной верстки?
На самом деле у каждого разработчика есть какая-то фишка на этот счет, а все из-за разного опыта. Чаще опыт формируется на заказчиках, это правда, вот у заказчика крутой iPhone, и он же хочет, чтобы на его телефоне его сайт был максимально идеальным.
Потому тут разработчики начинают играться, но принципе у всех стандарты более-менее одинаковые.
Я использую следующие размеры 20em (320px), 40em (640px), 60em (960px), 64em (1024px), 80em (1280px), 120em (1920px). Этого максимально достаточно, чтобы сайт был отзывчивым и отображался хорошо на разных устройствах.
Причем нужно понимать, что есть разные ситуации, и не стоит применять все 6 размеров для каждого блока. Чаще всего дизайнеры отдают 2-3 размера экранов, потому здесь уже нужно действовать по ситуации.
Я лично заметил, что в основном я сначала верстаю для 320px, после беру 640 как следующий брейкпоинт, после него 1024, ну а после 1280. Но бывают проекты где нужно использовать и все остальные, которые я указал выше.
Покажу в медиа запросах, что использую я:
Для мобильных я делаю сразу, то есть включаю в Google Chrome их утилиту DevTools (F12), а там тыкаю на эту кнопочку (CTRL + SHIFT + M):
А после что-то из последних устройств типа iPhone 6 или iPhone X.
Для планшетов следующие медиа запросы:
@media print, screen and (min-width: 40em) {}
@media print, screen and (min-width: 64em) {}
Desctop
@media screen and (min-width: 80em) {}
/* иногда, когда уж очень нужно также можно использовать 90em (1440) – Пользователи на MacBook */
@media screen and (min-width: 90em) {}
Full HD дисплеи
@media screen and (min-width: 120em) {}
Достаточно часто пригождаются следующие сервисы (думаю их используют все):
Если тебе было полезно прочесть этот пост, ты бы мог подписаться на обновления – иногда я делаю дайджест с самыми полезными и интересными постами. Так ты бы мог всегда в курсе о каких-то полезных вещах и новинках. Форма подписки ниже.
Кстати, я буду очень рад твоему комментарию – это может быть простое спасибо ну или даже критика, я ей как оказалось тоже радуюсь!
Метки: css, css трюки, адаптивная верстка