Рано или поздно у любого разработчика сайтов или веб-дизайнера возникает вопрос под какие размеры верстать сайт или делать его дизайн. В этой статье я расскажу о популярных размерах экранов у современных устройств и нужно ли под каждый из них делать макет или медиазапрос.
Всем привет.
Сегодня мы поговорим о важном. О размерах. И умении ими управлять и пользоваться.
Если размер слишком маленький или слишком большой, то это может всегда привести к неприятным последствиям. И неважно о чем идет речь.
О размере одежде, женского белья или того о чем вы сейчас подумали. Размер имеет значение. Но не менее важно правильно им пользоваться и управлять.
Эта аксиома действует в любых сферах жизнедеятельности человека. В том числе в дизайне и разработке сайтов.
В мире много различных устройств и у них разные размеры экранов. И это не считая Retina, 4k, 8k. И многих других мелочей.
Если вы что-то сделаете неправильно и не предусмотрите, то ваш продукт будет выглядеть плохо, а значит пользователь уйдет с сайта, а вы или ваш клиент потеряете деньги.
Сегодня мы поговорим о трех вещах:
- Размерах экранов;
- Нужно ли под каждый размер делать отдельный медиазапрос или макет в Figma
- Какие размеры макетов и точки медиазапросов делать при верстке
- И причем тут Botstrap.
Но прежде хочу сказать, что я делюсь исключительно своим мнением и не навязываю его Вам.
Вы можете поступать иначе, я рассказываю как делаю сам.
Итак, погнали.
Размеры экранов
Как я уже написал ранее размеров экранов очень много. Какие-то более популярные, какие-то менее популярные. Какие-то меньше, какие-то больше.
Под все эти варианты вы физически не сможете сделать дизайн или верстку сайта. А даже если захотите, то это займет очень много времени.
Поэтому самым правильным будет выбрать самые популярные размеры и под них сделать адаптивный дизайн и верстку.
Среди них можно выделить горизонтальные и вертикальные размеры экранов.
Горизонтальные размеры экранов
- 3840×2160 (4K UHD) — распространено для мониторов и телевизоров с высоким разрешением, а также для премиальных ноутбуков.
- 2560×1440 (QHD) — предпочтительный вариант для топовых мониторов и некоторых премиальных устройств.
- 1920×1080 (Full HD) — широко используется на настольных ПК, ноутбуках и крупных смартфонах.
- 1600×900 — встречается в ноутбуках и мониторах среднего класса.
- 1536×864 — используется в некоторых ноутбуках среднего класса.
- 1440×900 — популярно среди более старых и устройств среднего сегмента.
- 1366×768 — часто встречается в бюджетных ноутбуках и старых дисплеях.
- 1360×768 — встречается в бюджетных ноутбуках и старых телевизорах.
- 1280×720 (HD) — стандарт для недорогих ноутбуков и базовых мониторов.
- 1024×768 — распространено в старых мониторах и планшетах.
Вертикальные размеры экранов
- 768×1024 — используется в планшетах и небольших мониторах.
- 414×896 — встречается на некоторых моделях iPhone (например, iPhone 11).
- 375×812 — стандарт для iPhone X и похожих моделей.
- 360×640 — распространено среди бюджетных смартфонов.
- 320×480 — типично для старых или компактных смартфонов.
Таким образом выходит 15 популярных размеров экранов современных устройств.
Дальше поговорим нужно ли под каждый размер делать отдельный макет или медиазапрос.
Размеры экранов и макетов дизайна. Медиазапросы
Сразу скажу, что однозначного ответа на этот вопрос нет. Во многом все зависит от изначального дизайна.
Если вам дали уже готовый макет и вы должны верстать, то вполне возможно, что придется делать дополнительные медиазапросы.
Если же вы делаете все с нуля под ключ, то вы можете упростить себе работу.
И в этом вам поможет Bootstrap.
Чтобы избежаить истерик сразу скажу, что сам я Bootstrap в своей работе не использую.
Но некоторые контрольные точки медиазапросов, которые есть в bootstrap - да.
Bootstrap нам предлагает 6 размеров сеток. Ниже указана ширина экрана и контрольные точки:
- Extra small (xs) - <576 px
- Small (sm) - ≥576 px
- Medium (md) - ≥768 px
- Large (lg) - ≥992 px
- Extra large (xl) - ≥1200px
- Extra extra large (xxl) - ≥1400 px
Как я указал, я не использую сетки Bootstrap один в один. По максимуму у меня выходят такие контрольные точки и размеры макетов.
- Extra small (xs) - 320 px
- Small (sm) - 576 px
- Medium (md) - 768 px
- Large (lg) - 1024 px
- Extra large (xl) - 1280px
- Extra extra large (xxl) - 1440 px
- Super extra large (sxxl) - 2560 px
Но на практике я столько не делаю:
- Extra small (xs) - 320 px
- Medium (md) - 768 px
- Large (lg) - 1024 px
- Extra large (xl) - 1280px
- Super extra large (sxxl) - 2560 px
Но здесь нужно учитывать нюансы дизайна и стоящих целей и задач. Многие дизайнеры и верстальщики делают такие размеры:
- Small (sm) - 576 px
- Medium (md) - 768 px
- Large (lg) - 1024 px
- Extra large (xl) - 1280px
- Extra extra large (xxl) - 1440 px
Однако нужно учитывать, что это не решение на все случаи жизни. У меня была ситуация, когда пришлось делать медиазапрос под экран 1366×768 пикселей.
Просто потому что у клиента был старый нетбук.
Зачем знать популярные размеры экранов устройств
Вполне резонен вопрос: зачем знать 15 размеров экранов устройств, если фактическеи используется в дизайне и верстке 5 размеров.
Все верно. При дизайне и осрбенно верстке вы будете использовать 5, может шесть медиазапросов. Но вы обязаны знать размеры экранов популярных устройств, чтобы проверять качество своей работы и быть уверенными что ваш сайт классно смотрится всегда и везде и у всех пользователей, а не только в ключевых точках.
Надеюсь статья была полезна. Подписывайтесь. Ставьте лайки.