Медиа-запросы и брейкпоинты для адаптивной верстки
Содержание
Брейкпоинты
Это всего лишь выбор самых популярных разрешений у всех устройств на рынке, только и всего. То есть их можно придумать самому и использовать в своей работе.
Но есть более менее устоявшиеся значения.
Бутстрап использует такие:
- 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) {
}Получается наиболее четкая и ясная картина.
То есть, из всех брейкпоинтов собираются отдельные диапазоны и уже не придется держать в голове, где же там идет переназначение и в какой последовательности эти контейнеры записаны в файле стилей. Диапазоны можно писать в любой последовательности, но лучше, конечно, соблюдать чистоту и порядок кода. В дальнейшем будет легче разобраться самому.
