2.1 Основы медиа-запросов
Медиа-запросы (media queries) являются одним из ключевых инструментов для создания отзывчивых веб-сайтов. С их помощью можно адаптировать стили под различные устройства и размеры экранов, обеспечивая оптимальное отображение и удобство использования. Ниже мы рассмотрим основы использования медиа-запросов, их синтаксис, а также примеры адаптации стилей для разных экранов.
Медиа-запросы используют правило @media, которое позволяет применять определенные стили только при выполнении заданных условий. Условия могут включать размеры экрана, разрешение, ориентацию и другие параметры.
Синтаксис:
@media media-type and (media-feature) {
/* стили */
}
Где:
media-type: тип медиа, для которого будут применяться стили. Чаще всего используется screenmedia-feature: особенности медиа, такие как ширина, высота, ориентация и т. д.
Пример:
- В этом примере фон страницы станет светло-голубым, если ширина экрана не превышает 768 пикселей.
@media screen and (max-width: 768px) {
body {
background-color: lightblue;
}
}
2.2 Типы медиа-запросов
1. Запросы по ширине и высоте
Эти медиа-запросы позволяют изменять стили в зависимости от ширины и высоты окна просмотра.
Примеры:
/* Применить стили, если ширина экрана меньше или равна 768px */
@media (max-width: 768px) {
.container {
padding: 10px;
}
}
/* Применить стили, если высота экрана больше 800px */
@media (min-height: 800px) {
.header {
height: 150px;
}
}
2. Ориентация (orientation)
Запросы по ориентации экрана позволяют адаптировать стили в зависимости от того, находится ли устройство в портретном (portrait) или ландшафтном (landscape) режиме.
Примеры:
/* Применить стили для портретной ориентации */
@media (orientation: portrait) {
.sidebar {
display: none;
}
}
/* Применить стили для ландшафтной ориентации */
@media (orientation: landscape) {
.sidebar {
display: block;
}
}
3. Плотность пикселей (resolution)
Медиа-запросы по плотности пикселей позволяют адаптировать стили для устройств с различной плотностью пикселей, таких как экраны Retina.
Примеры:
/* Применить стили для экранов с плотностью пикселей 2x и выше */
@media (min-resolution: 2dppx) {
.high-res-image {
background-image: url('high-res-image.png');
}
}
/* Применить стили для экранов с плотностью пикселей менее 2x */
@media (max-resolution: 1.99dppx) {
.high-res-image {
background-image: url('standard-res-image.png');
}
}
2.3 Комбинирование медиа-запросов
Медиа-запросы могут быть объединены с помощью логических операторов and, not и only.
Примеры
Использование оператора and:
/* Применить стили для устройств с шириной экрана между 600px и 1200px */
@media (min-width: 600px) and (max-width: 1200px) {
.main-content {
margin: 0 auto;
width: 80%;
}
}
Использование оператора not:
/* Применить стили для всех устройств, кроме тех, у которых ширина экрана менее 600px */
@media not all and (max-width: 600px) {
.footer {
display: block;
}
}
Использование оператора only:
/* Применить стили только для экранов */
@media only screen and (max-width: 768px) {
.menu {
display: none;
}
}
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ