Как сделать адаптивную верстку через media queries — на пальцах?
Сайт нормально выглядит на компе, но на телефоне всё разъезжается. Слышал про media queries, но не понимаю как их применять. Можно простой пример?
4 ответа
Media query — это блок CSS, который применяется только при определённой ширине экрана. Идея: пишешь базовые стили, а потом «переопределяешь» их для узких экранов.
/* базовые стили — десктоп */
.menu {
display: flex;
gap: 24px;
}
/* когда ширина экрана 768px и меньше */
@media (max-width: 768px) {
.menu {
flex-direction: column; /* пункты в столбик */
gap: 12px;
}
}
Два обязательных момента, без которых ничего не заработает на телефоне:
- Добавь в
<head>мету:<meta name="viewport" content="width=device-width, initial-scale=1"> - Не задавай блокам фиксированную ширину в px — используй
max-width,%, flex/grid.
Популярный подход — mobile-first: базовые стили под мобилку, а @media (min-width: ...) добавляет навороты для широких экранов.
Главное не забудь <meta name="viewport" content="width=device-width, initial-scale=1"> в head, иначе media queries на телефоне будут игнориться.
@media (max-width: 600px) { ... } — внутри переопределяешь стили для мелких экранов. Всё.
Через @media.
