Медиа-запросы и брейкпоинты для адаптивной верстки

Брейкпоинты

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

Но есть более менее устоявшиеся значения.

Бутстрап использует такие:

  • 0
  • 576px
  • 768px
  • 992px
  • 1200px
  • 1400px

Когда-то я использовал такие:

  • 320px
  • 640px
  • 960px
  • 1280px
  • 1920px

Медиа-запросы

Подробнее можно изучить в официальном источнике.

Короче используем min-width или max-width, или их сочетание.

На пальцах (разрешения взяты для примера):

  1. @media (min-width: 1200px) – контейнер стилей для устройств с минимальной шириной экрана в 1200px.
  2. @media (min-width: 992px) and (max-width: 1199px) – для устройств с минимальной 992px и максимальной 1199px,
  3. @media (max-width: 767px) – для устройств с максимальной шириной экрана в 767px.

Первый я называю адаптивка на минах, второй диапазонный, последний на максах.

Для правильного использования медиа-запросов важно знать две вещи:

  1. Чаще всего сайт верстается от бОльшего разрешения к меньшему. То есть сначала для десктопа, а потом подгоняется под устройства всё меньше и меньше, в сторону уменьшения.
  2. В css-файле чем ниже написаны стили (ближе к концу), тем они приоритетнее, то есть они перезаписывают предыдущие.

Исходя из этого, к примеру, адаптивка на максах (третий в списке вариант), должна быть написана именно в такой последовательности сверху вниз:

адаптивная верстка на максах

адаптивная верстка на максах

Самым безопасным (чтобы ничего не перепутать) и понятным можно взять для себя такой способ:

@media (min-width: 1200px) {

}

@media (min-width: 992px) and (max-width: 1199px) {

}

@media (min-width: 768px) and (max-width: 991px) {

}

@media (min-width: 480px) and (max-width: 767px) {

}

@media (min-width: 320px) and (max-width: 479px) {

}

@media (max-width: 320px) {

}

Получается наиболее четкая и ясная картина.

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

5 1 голос
Рейтинг статьи
Будь другом, дай знать:
Вы уже голосовали

Читайте также:

Подписаться
Уведомить о
guest
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии