Каталог
Веб-разработка с нуля: четыре курса по порядку.
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Каталог
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Урок 36 из 53 · 9 мин
@media, ширина экрана, mobile-first, viewport-единицы и meta viewport.
Открываю сайт в метро — всё крошечное и уезжает вбок!
Половина посетителей заходит с телефона. Пишем стили сначала для него, а для больших экранов — добавки в @media.
@media@media (min-width: 768px) { … } — правила внутри работают, только когда условие выполнено.<style>
.menu { display: grid; gap: 6px; } @media (min-width: 400px) { .menu { grid-template-columns: 1fr 1fr; } } .menu > * { background: #fdf6ec; border: 1px solid #c8763a; padding: 6px; }
</style>
<div class="menu"><div>Ручка</div><div>Пенал</div></div>min-width-медиазапросы добавляют колонки на широких.meta viewport<meta name="viewport" content="width=device-width, initial-scale=1"> в <head> говорит телефону не притворяться компьютером.Пиши для телефона, добавляй для больших экранов через min-width.
Базово .menu — грид в одну колонку. Добавь @media (min-width: 768px), внутри которого у .menu grid-template-columns: 1fr 1fr.
Выберите один ответ.
Как пишут стили при подходе mobile-first?
Выберите один ответ.
Без чего медиазапросы на телефоне не сработают как надо?
Введите короткий ответ без лишних пробелов.
Какая единица учитывает выезжающие панели браузера на телефоне — vh или dvh? Введи единицу.
Проверяем состояние обучения…