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