Брейкпоинты
Это всего лишь выбор самых популярных разрешений у всех устройств на рынке, только и всего. То есть их можно придумать самому и использовать в своей работе.
Но есть более менее устоявшиеся значения.
Бутстрап использует такие:
- 0
- 576px
- 768px
- 992px
- 1200px
- 1400px
Когда-то я использовал такие:
- 320px
- 640px
- 960px
- 1280px
- 1920px
Медиа-запросы
Подробнее можно изучить в официальном источнике.
Короче используем min-width или max-width, или их сочетание.
На пальцах (разрешения взяты для примера):
@media (min-width: 1200px)– контейнер стилей для устройств с минимальной шириной экрана в 1200px.@media (min-width: 992px) and (max-width: 1199px)– для устройств с минимальной 992px и максимальной 1199px,@media (max-width: 767px)– для устройств с максимальной шириной экрана в 767px.
Первый я называю адаптивка на минах, второй диапазонный, последний на максах.
Для правильного использования медиа-запросов важно знать две вещи:
- Чаще всего сайт верстается от бОльшего разрешения к меньшему. То есть сначала для десктопа, а потом подгоняется под устройства всё меньше и меньше, в сторону уменьшения.
- В 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) {
}
Получается наиболее четкая и ясная картина.
То есть, из всех брейкпоинтов собираются отдельные диапазоны и уже не придется держать в голове, где же там идет переназначение и в какой последовательности эти контейнеры записаны в файле стилей. Диапазоны можно писать в любой последовательности, но лучше, конечно, соблюдать чистоту и порядок кода. В дальнейшем будет легче разобраться самому.
Странное дело. Иногда разрешение, которое прописано в медиа-запросе не входит само в этот диапазон, а иногда входит. Т.е. в контейнере
@media (max-width: 990px)стили иногда будут применяться к 990 пикселям, а иногда нет. В данном случае, я считаю один пиксель роли не играет, и предлагаю просто забить на это.
UPD. Постепенно начало набирать такое понятие, как mobile-first. То есть мобильная версия сайта верстается первой, а потом подгоняется под разрешения побольше. Но это вкусовщина, я считаю. Внимательный верстальщик сделает так, что итог будет одинаковый, и неважно с какого конца начинать.
На сегодня лично мои рабочие брейкпоинты для мобильной верстки такие (на максах):
@media (max-width: 990px) {
}
@media (max-width: 820px) {
}
@media (max-width: 768px) {
}
@media (max-width: 576px) {
}
@media (max-width: 390px) {
}
Пользуйтесь.