Каким должно быть базовое разрешение в пикселях. Как изменить размер базового разрешения?

Отвечаем на часто задаваемый вопрос — какой должен быть размер базового разрешения и как его изменить.

Смотрите видео:

https://vk.com/video-219751701_456239240

VK Видео | YouTube | Rutube

Что такое базовое разрешение

Базовое разрешение — это брейкпоинт, с которого нужно начинать верстку. Именно с него все стили и изменения, сделанные на странице, унаследуются на другие брейкпоинты.

Таким образом, мы начинаем верстку на базовом разрешении, создаем все стили — и они передаются и на брейкпоинты для планшетов и телефонов.


Стили унаследовались с базового разрешения на планшеты и смартфоны

Нужно ли создавать брейкпоинты для больших мониторов

Не нужно сразу в начале верстки добавлять дополнительные брейкпоинты для больших мониторов. Важно разобраться, нужны ли они вообще в вашем проекте.

Дополнительные брейкпоинты не нужны, если:

  • На больших мониторах сайт должен выглядеть так же, как и на мониторах поменьше. Например, ваш сайт имеет ограниченный по ширине контейнер, и на больших мониторах просто появляется пустое пространство по бокам.

Дополнительные брейкпоинты нужно создавать, если:

  • На больших экранах сайт должен выглядеть иначе, чем на стандартных.

Как проверить вид сайта на разных разрешениях

Если вы делаете флюидную верстку и хотите увидеть, как сайт будет выглядеть на определенной ширине:

  1. введите нужное значение (например, 1920) в поле выбора брейкпоинта
  2. или выберите один из готовых пресетов


Вводим значение разрешения экрана 1920px

Работа с нестандартными разрешениями

Вы можете верстать на любом базовом разрешении, которое вам удобно. Например, для монитора с шириной 1800 пикселей можно выбрать разрешение 1600 пикселей, чтобы макет хорошо помещался на экране.

Если вам нужно сверстать сайт на большом мониторе, например, с шириной 9000 пикселей, то вы можете ввести это значение. Вы увидите, как сайт будет выглядеть на этом разрешении.

Сайт при разрешении экрана 9000px

Вы можете задать любое разрешение до 9999 пикселей.

Если ваш монитор меньше, чем выбранное разрешение, холст будет автоматически масштабироваться под ваш экран. Значение масштаба в процентах отображается слева от выбранного разрешения.

Масштаб при разрешении 1440px — 82%

Для регулировки масштаба можно использовать сочетание клавиш Ctrl + и Ctrl –.

Выбор базового разрешения

Базовое разрешение может быть любым, которое вы зададите.

Например, если сайт сделан при помощи флюидной верстки, он будет смотреться одинаково на всех разрешениях — 1400, 1920 или даже 6000. В данном случае дополнительные брейкпоинты не нужны и верстать можно на любом базовом разрешении.

Сайт выглядит одинаково на разрешениях 1920px и 6000px 

Резюме

  • Базовое разрешение — брейкпоинт, с которого начинается верстка и наследуются все стили на другие разрешения. Для него можно задать любое значение до 9999 пикселей.
  • Дополнительные брейкпоинты для больших мониторов нужны, только если сайт должен отображаться иначе, чем на стандартном мониторе.