Медиазапросы — это мощный инструмент в CSS, который позволяет адаптировать дизайн вашего сайта под различные устройства и размеры экрана. В этой статье мы разберемся, как использовать CSS-медиазапросы для создания адаптивного сайта.
Основы медиазапросов
Медиазапросы позволяют применять различные стили в зависимости от характеристик устройства, таких как ширина экрана, высота экрана, ориентация и т.д. Они используются с @media правилом в CSS. Вот базовый синтаксис медиазапроса:
@media (кондиционный_оператор: значение) {
/* стили для указанных условий */
}
Пример использования медиазапросов
Допустим, вы хотите изменить размер шрифта для заголовка на меньших экранах. Вы можете использовать медиазапрос для этого:
h1 {
font-size: 36px;
}
@media (max-width: 768px) {
h1 {
font-size: 24px;
}
}
В данном примере, если ширина экрана меньше или равна 768 пикселей, размер шрифта для заголовка будет изменен на 24px.
Различные типы медиазапросов
Вы можете комбинировать несколько условий медиазапросов, используя операторы and, not, only и запятые. Рассмотрим некоторые примеры:
Использование оператора and
Следующий медиазапрос применит стили только для экранов с шириной от 768 до 1024 пикселей:
@media (min-width: 768px) and (max-width: 1024px) {
/* стили для указанных условий */
}
Использование оператора not
Этот медиазапрос применит стили только для устройств, которые НЕ являются переносными компьютерами:
@media not all and (hover: none) {
/* стили для указанных условий */
}
Использование оператора only
Оператор only используется для применения стилей только для определенного типа устройств:
@media only screen and (max-width: 600px) {
/* стили для указанных условий */
}
Использование запятых
Запятые позволяют применять стили для разных типов устройств и условий одновременно:
@media (max-width: 600px), (max-height: 400px) {
/* стили для указанных условий */
}
📘 Важно: При использовании медиазапросов убедитесь, что вы добавили метатег viewport в раздел <head> вашего HTML-файла:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Теперь вы знаете основы использования CSS-медиазапросов для создания адаптивного сайта. Попробуйте экспериментировать с различными условиями и стилями, чтобы создать удивительные адаптивные дизайны для своего проекта!
Добавить комментарий