Что такое медиазапросы в CSS?
Медиазапросы в CSS — это мощный инструмент, который позволяет применять разные стили в зависимости от характеристик устройства, на котором отображается веб-страница. Это стало особенно актуально с ростом популярности мобильных устройств. С их помощью вы можете адаптировать дизайн вашего сайта под различные разрешения экранов, размеры устройств и другие особенности.
Основы медиазапросов
Синтаксис медиазапроса следующий:
@media условие {
/* ваши стили */
}
Где условие может быть разным. Наиболее распространенные из них:
max-width: определяет максимальную ширину экрана.min-width: определяет минимальную ширину экрана.orientation: определяет ориентацию устройства (портретная или альбомная).
Пример использования медиазапросов
Рассмотрим пример, как задать разные стили для мобильных и настольных устройств:
/* Стили по умолчанию для настольных устройств */
body {
font-size: 16px;
background-color: white;
}
/* Стили для экранов шириной 600px и меньше */
@media (max-width: 600px) {
body {
font-size: 14px;
background-color: lightgrey;
}
}
В этом примере, если ширина экрана пользователя меньше или равна 600 пикселей, шрифт уменьшается с 16 до 14 пикселей, а цвет фона меняется на светло-серый.
Множественные медиазапросы
Вы можете использовать несколько медиазапросов в одном файле CSS, чтобы регулировать стили для различных устройств:
/* Для мобильных устройств */
@media (max-width: 600px) {
body {
font-size: 14px;
}
}
/* Для планшетов */
@media (min-width: 601px) and (max-width: 1024px) {
body {
font-size: 16px;
}
}
/* Для настольных устройств */
@media (min-width: 1025px) {
body {
font-size: 18px;
}
}
Заключение
Медиазапросы — важный аспект адаптивного веб-дизайна. Они помогают улучшить юзабилити вашего сайта на разных устройствах. Используйте их для изменения стилей в зависимости от ширины экрана, разметки и других параметров устройства. Это позволяет создавать более удобные и доступные интерфейсы для ваших пользователей.