Медиазапросы и разработка с приоритетом мобильных устройств
Пишите контрольные точки с медиазапросами min-width, сначала создавайте мобильную компоновку, а затем постепенно улучшайте её для больших экранов.
«Медиазапросы и разработка с приоритетом мобильных устройств» — бесплатный урок Frontend Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.
Что такое медиазапросы
Медиазапросы применяют правила CSS только при выполнении определённых условий, например когда ширина области просмотра превышает заданный порог. Они лежат в основе адаптивного дизайна и позволяют одной таблице стилей подстраиваться под экран любого размера.
Базовый синтаксис
Медиазапрос заключает блок CSS в правило @media. Правила внутри применяются только при выполнении условия.
@media (min-width: 768px) {
.container {
max-width: 1200px;
margin: 0 auto;
}
}min-width и max-width
min-width: применяет стили, когда область просмотра имеет не меньшую ширину (подход mobile-first). max-width: применяет стили, когда область просмотра имеет не большую ширину (подход desktop-first). Для разработки по принципу mobile-first предпочтительнее min-width.
/* Mobile-first (preferred): */
@media (min-width: 768px) { /* tablets and up */ }
@media (min-width: 1024px) { /* desktops and up */ }
/* Desktop-first: */
@media (max-width: 767px) { /* phones only */ }Подход mobile-first
Сначала напишите CSS для маленьких экранов, вне любых медиазапросов. Затем используйте медиазапросы с min-width, постепенно добавляя возможности для больших экранов. В результате мобильные пользователи загружают меньше CSS, а код в целом становится чище.
.card {
/* Mobile defaults: single column */
padding: 16px;
font-size: 0.9rem;
}
@media (min-width: 768px) {
.card {
/* Tablet enhancement */
padding: 24px;
font-size: 1rem;
}
}Распространённые контрольные точки
Выбирайте контрольные точки на основе содержимого, а не конкретных устройств. Популярные начальные значения: 480 пикселей (большие телефоны), 768 пикселей (планшеты), 1024 пикселя (небольшие настольные компьютеры), 1280 пикселей (большие настольные компьютеры). Не создавайте контрольные точки для конкретных моделей устройств.
Типы медиаданных
Помимо ширины экрана, можно задавать целевые типы медиаданных: screen для дисплеев и print для принтеров. Медиазапросы для печати позволяют настроить вид страницы при печати (скрыть навигацию, изменить цвета).
@media print {
nav, footer, .ads {
display: none;
}
body {
font-size: 12pt;
color: black;
}
}Объединение условий с помощью and
Объединяйте условия с помощью and: применяйте стили, только когда истинны оба условия. Используйте not и or для более сложной логики.
@media (min-width: 768px) and (max-width: 1023px) {
/* tablets only */
}
@media (orientation: landscape) and (max-width: 767px) {
/* landscape phones */
}prefers-color-scheme
Учитывайте предпочтение пользователя в отношении тёмного режима OS. По умолчанию предоставляйте тёмную тему без переключателя.
@media (prefers-color-scheme: dark) {
body {
background: #1a202c;
color: #f7fafc;
}
}prefers-reduced-motion
Учитывайте предпочтение пользователей, которым требуется меньше движения (например, при вестибулярных расстройствах или эпилепсии). Отключайте или упрощайте анимации внутри этого медиазапроса.
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}Контейнерные запросы — будущее
Контейнерные запросы (@container) применяют стили в зависимости от размера родительского контейнера, а не области просмотра. Они обеспечивают настоящую адаптивность на уровне компонентов и поддерживаются всеми современными браузерами с 2023 года.
.card-container {
container-type: inline-size;
}
@container (min-width: 400px) {
.card { flex-direction: row; }
}Логические свойства для поддержки RTL
Используйте логические свойства, например margin-inline-start вместо margin-left, для вёрстки, которая работает как в языках с направлением слева направо, так и в языках с направлением справа налево. Создавайте адаптивную вёрстку с расчётом на будущее.
Быстрая проверка
Какой подход правильно определяет стратегию CSS сначала мобильные?
Итоги: медиазапросы и подход «сначала мобильные»
@media (min-width: N) используется для постепенного улучшения в подходе «сначала мобильные». Пишите базовые стили для мобильных устройств без медиазапросов. Добавляйте сложность для больших экранов. Используйте prefers-color-scheme для тёмного режима, prefers-reduced-motion для доступности, а контейнерные запросы — для адаптивности на уровне компонентов.
Часто задаваемые вопросы
Урок «Медиазапросы и разработка с приоритетом мобильных устройств» бесплатный?
Да — полный текст урока «Медиазапросы и разработка с приоритетом мобильных устройств» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.
Чему я научусь в уроке «Медиазапросы и разработка с приоритетом мобильных устройств»?
Пишите контрольные точки с медиазапросами min-width, сначала создавайте мобильную компоновку, а затем постепенно улучшайте её для больших экранов. Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Frontend Academy?
Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Медиазапросы и разработка с приоритетом мобильных устройств»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Frontend Academy?
Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Мета-тег viewport
- Flexbox для компоновки
- CSS Grid для компоновки
- Медиазапросы и разработка с приоритетом мобильных устройств