Как сделать адаптивную вёрстку через media queries?
Сайт нормально смотрится на ноутбуке, но на телефоне всё разъезжается и текст крошечный. Слышал про media queries, но не знаю, с чего начать. Как сделать, чтобы вёрстка подстраивалась под ширину экрана?
2 ответа
Адаптивность строится на двух вещах: мета-теге viewport и media queries.
- Сначала добавьте в
<head>(без него телефон притворяется широким экраном и всё уменьшает):
<meta name="viewport" content="width=device-width, initial-scale=1">
- Затем меняйте стили в зависимости от ширины окна:
.container {
display: flex;
gap: 16px;
}
/* экран уже 600px — складываем колонки в столбик */
@media (max-width: 600px) {
.container {
flex-direction: column;
}
}
@media (max-width: 600px) означает «применить правила, если ширина окна не больше 600px». Так на телефоне колонки встают друг под друга.
Подход mobile-first считается лучшим: сначала пишете базовые стили под мобильный, а затем через @media (min-width: ...) добавляете оформление для широких экранов. Так меньше переопределений.
Частая ошибка — забыть viewport-мета. Без него media queries как будто «не работают», потому что мобильный браузер рендерит страницу шириной ~980px и масштабирует.
Не зацикливайтесь на «телефон/планшет/десктоп» как на конкретных устройствах. Ставьте брейкпоинт там, где макет начинает выглядеть плохо при сужении окна. Часто хватает 1-2 точек (например, 600px и 900px). И помните: многое решается без media queries вообще — flex-wrap: wrap, grid с minmax, проценты и max-width сами адаптируются.