В одной из предыдущих статей мы уже обсуждали тему создания мобильной версии для WordPress, подчеркивая важность адаптивности и медиа-запросов CSS. В этой публикации мы будем более детально рассматривать медиа-запросы CSS, которые являются инструментом для создания адаптивной вёрстки. Они изменяют стили вашего сайта в зависимости от ширины экрана или его ориентации — будь то вертикальная или горизонтальная.
Следует заметить, что медиа-запросы CSS находят поддержку во всех основных веб-браузерах, включая даже более старые версии. Это гарантирует, что использование медиа-запросов для адаптивности вёрстки является полностью кроссбраузерным решением.
Что такое @media-запросы CSS
Медиа-запросы CSS — это инструмент, который позволяет применять разные стили к элементам в зависимости от разрешения экрана, на котором отображается сайт. Это важный аспект адаптивного дизайна, который позволяет вашему сайту выглядеть и функционировать оптимально на различных устройствах, включая компьютеры, планшеты и смартфоны.
Подключение метатега viewport
Перед тем как мы начнем работать над адаптивной вёрсткой и @media
, необходимо убедиться, что на вашей странице присутствует метатег viewport
. В противном случае масштабирование страницы может быть некорректным и неадекватным.
<meta name="viewport" content="width=device-width, initial-scale=1">
width=device-width
: Эта часть говорит браузеру, что ширина видимой области страницы (viewport) на устройстве должна быть равной физической ширине экрана устройства.
initial-scale=1
: Этот параметр определяет начальное значение масштабирования страницы. Значение 1 означает, что страница будет отображаться в естественном масштабе без масштабирования.
Этот тег meta name="viewport"
особенно важен для мобильных устройств, так как он позволяет создавать адаптивный и отзывчивый дизайн, которые корректно отображаются на разных размерах экранов.
Операторы медиа-запросов CSS
Логические операторы играют решающую роль в определении, когда стили должны применяться к элементам, в зависимости от различных характеристик устройств и экранов. С помощью этих операторов можно точно настроить активацию стилей в соответствии с заданными условиями.
And
— Этот оператор работает как логическое «И», объединяя условия медиа-запросов. Стили будут применены только в том случае, если выполняются оба заданных условия.
@media (max-width: 768px) and (orientation: portrait) { /* Стили для устройств с максимальной шириной экрана 768px и портретной ориентацией */ }
Not
— Оператор «Не» применяет стили, если условие не выполняется. То есть, стили будут активированы, если не соблюдается указанное условие.
@media not screen and (max-width: 768px) { /* Стили для устройств, ширина экрана которых не превышает 768px */ }
,
(запятая) — Этот символ позволяет объединить различные условия медиа-запросов. Стили будут применены, если соблюдается хотя бы одно из указанных условий.
@media (max-width: 768px), (orientation: landscape) { /* Стили для устройств с максимальной шириной экрана 768px или альбомной ориентацией */ }
Only
— Оператор only используется для указания, что указанный медиа-запрос должен быть применен только в случае, если все другие медиа-запросы в блоке игнорируются.
@media only screen and (max-width: 768px) { /* Стили для устройств с максимальной шириной экрана 768px, игнорируя другие медиа-запросы */ }
Or
— Оператор «Или», позволяет применять стили, если хотя бы одно из условий выполнено.
@media (max-width: 480px) or (min-width: 1024px) { /* Стили для устройств с максимальной шириной экрана 480px или минимальной шириной 1024px */ }
@media типы устройств
Медиа-запросы предоставляют возможность адаптировать стили сайта в зависимости от типа девайса, на котором он отображается.
screen (экран)
Настольные компьютеры, ноутбуки, смартфоны и другие устройства с экраном.
@media screen and (max-width: 768px) { /* ... */ }
print (печать)
Устройства для печати, такие как принтеры.
/* Стили для печати */ @media print { /* ... */ }
speech (речь)
Устройства для чтения вслух, например, синтезаторы речи.
/* Стили для устройств с синтезаторами речи */ @media speech { /* ... */ }
all (все типы устройств)
Применяет стили ко всем типам устройств.
/* Стили для всех типов устройств с максимальной шириной 480px */ @media all and (max-width: 480px) { /* ... */ }
Какие бывают медиа-запросы CSS (медиафункции)
Медиа-функции позволяют применять стили к элементам в зависимости от различных параметров, таких как размер экрана, ориентация девайса, плотность пикселей и т.д.
max-width
Этот запрос используется для применения стилей только тогда, когда ширина экрана меньше или равна указанной.
/* Применить стили, если ширина экрана меньше или равна 768px */ @media (max-width: 768px) { /* Ваши стили здесь */ }
min-width
Этот запрос применяет стили только тогда, когда ширина экрана или контейнера больше, или равна указанному значению.
/* Стили для экранов с шириной 768px и более */ @media (min-width: 768px) { /* Ваши стили здесь */ }
min-height и max-height
Эти запросы позволяют применять стили к элементам в зависимости от минимальной и максимальной высоты экрана или контейнера.
@media (min-height: 600px) { /* Стили, применяемые, если высота экрана больше или равна определенному значению */ } @media (max-height: 400px) { /* Стили, применяемые, если высота экрана или меньше или равна определенному значению. */ }
orientation
Медиа-запрос orientation позволяет применять стили на основе ориентации устройства, то есть в вертикальном (portrait) или горизонтальном (landscape) режиме.
@media (orientation: landscape) { /* Стили для горизонтальной ориентации */ } @media (orientation: portrait) { /* Стили для вертикальной ориентации */ }
resolution
Позволяет настраивать стили в соответствии с плотностью пикселей на экране.
@media (min-resolution: 2dppx) { /* Стили для устройств с разрешением больше 1440px (ретиновые дисплеи) */ } @media (max-resolution: 1.5dppx) { /* Стили для устройств с разрешением меньше или равно 768px */ } @media (resolution: 300dpi) { /* Стили для устройств с разрешением дисплея 300dpi */ }
device-width и device-height
Эти запросы позволяют применять стили на основе физической ширины и высоты экрана.
@media (max-device-width: 768px) { /* Стили для устройств с максимальной шириной 768px */ } @media (min-device-height: 600px) { /* Стили для устройств с минимальной высотой 600px */ }
Комбинированный запрос для устройств с конкретной шириной и высотой
@media (min-device-width: 768px) and (max-device-height: 1024px) { /* Стили для устройств с шириной от 768px до 1024px и соответствующей высотой */ }
Примеры медиа-запросов CSS в адаптивной вёрстке
Давайте рассмотрим живой пример адаптивной вёрстки, в котором мы используем медиа-запрос max-width. В данном примере мы определим максимальную ширину экрана, при которой стили начнут действовать. То есть, как только ширина экрана будет равна или меньше указанной величине, соответствующие стили будут применены.
HTML
<!-- 1 --> <div class="wrap_container"> <div class="item_container"> <div class="item_box"> <div class="item_content"> <h2>Блок 1</h2> <p>текст</p> </div> </div> <div class="item_box"> <div class="item_content"> <h2>Блок 2</h2> <p>текст</p> </div> </div> <div class="item_box"> <div class="item_content"> <h2>Блок 2</h2> <p>текст</p> </div> </div> </div> </div> <!-- 2 --> <div class="wrap_container-2"> <div class="item_container-2"> <div class="item_box-2"> <div class="item_content-2"> <h2>Блок 1</h2> <p>текст</p> </div> </div> <div class="item_box-2"> <div class="item_content-2"> <h2>Блок 2</h2> <p>текст</p> </div> </div> </div> </div> <!-- 3 --> <div class="wrap_container-3"> <div class="item_container-3"> <div class="item_box-3"> <div class="item_content-3"> <h2>Блок 1</h2> <p>текст</p> </div> </div> <div class="item_box-3"> <div class="item_content-3"> <h2>Блок 2</h2> <p>текст</p> </div> </div> <div class="item_box-3"> <div class="item_content-3"> <h2>Блок 2</h2> <p>текст</p> </div> </div> <div class="item_box-3"> <div class="item_content-3"> <h2>Блок 2</h2> <p>текст</p> </div> </div> </div> </div>
CSS
/* 3 column*/ .wrap_container { background: #424242; width: 100%; padding: 60px 0; } .item_container { display: flex; flex-wrap: wrap; max-width: 1100px; margin: 0px auto; padding: 0.5rem; } .item_box { width: 33.33%; padding: .7rem; } .item_content { background: #888; padding: 2rem; border-radius: 5px; } .item_content h2 { margin-bottom: .6rem; font-size: 30px; } .item_content p { margin-bottom: 0; } /* @media - 3 column */ @media (max-width: 768px) { .item_box { width: 50%; } .item_content h2 { font-size: 26px; } } @media (max-width: 480px) { .item_box { width: 100%; } .item_content { padding: 1.4rem; } .item_content h2 { font-size: 21px; } } /* 2 column*/ .wrap_container-2 { background: #d0d0d0; width: 100%; padding: 60px 0; } .item_container-2 { display: flex; flex-wrap: wrap; max-width: 1100px; margin: 0px auto; padding: 0.5rem; } .item_box-2 { width: 50%; padding: .7rem; } .item_content-2 { background: #888; padding: 2rem; border-radius: 5px; } .item_content-2 h2 { margin-bottom: .6rem; font-size: 30px; } .item_content-2 p { margin-bottom: 0; } /* @media - 3 column */ @media (max-width: 768px) { .item_content-2 h2 { font-size: 26px; } } @media (max-width: 480px) { .item_box-2 { width: 100%; } .item_content-2 { padding: 1.4rem; } .item_content-2 h2 { font-size: 21px; } } /* 4 column*/ .wrap_container-3 { background: #ececec; width: 100%; padding: 60px 0; } .item_container-3 { display: flex; flex-wrap: wrap; max-width: 1100px; margin: 0px auto; padding: 0.5rem; } .item_box-3 { width: 25%; padding: .7rem; } .item_content-3 { background: #888; padding: 2rem; border-radius: 5px; } .item_content-3 h2 { margin-bottom: .6rem; font-size: 30px; } .item_content-3 p { margin-bottom: 0; } /* @media - 3 column */ @media (max-width: 768px) { .item_box-3 { width: 50%; } .item_content-3 h2 { font-size: 26px; } } @media (max-width: 480px) { .item_box-3 { width: 100%; } .item_content-3 { padding: 1.4rem; } .item_content-3 h2 { font-size: 21px; } }
Если не работает медиа-запрос CSS
Ошибка в запросе
Убедитесь, что ваш медиа-запрос написан правильно и соответствует стандартам CSS. Также удостоверьтесь, что вы используете правильные ключевые слова, значения и операторы.
Проверьте порядок
Порядок медиа-запросов имеет значение. Браузер применяет стили в порядке их объявления, поэтому убедитесь, что они должны идти после основных стилей элементов, к которым они применяются.
Очистите кэш браузера
Браузеры иногда кешируют стили и могут не обновлять их при изменениях. Попробуйте очистить кэш браузера или открыть страницу в режиме инкогнито/приватного просмотра.
Проверьте разрешение экрана
Проверьте, что вы используете правильное разрешение экрана в медиа-запросе. Если вы используете конкретные разрешения (например, min-width или max-width), удостоверьтесь, что разрешение вашего экрана соответствует указанным значениям.
Попробуйте другие браузеры
Если медиа-запросы не работают в одном браузере, попробуйте проверить их в другом. Иногда проблемы могут быть связаны с конкретным браузером.
Добрый вечер , такой вопрос : есть Меню когда нажимаешь идёт вертикальное меню в стиле
меню 1 меню 2 и меню 3 они сразу развёрнуты , как сделать так чтобы при нажатии на кнопку Меню они выходили в свёрнутом виде ? (всё та же тема quadrum-theme ).
Pawel, Добрый вечер! Судя по всему это так задумано... посмотрите варианты подобного меню, как там реализована эта деталь, а дальше просто подстраиваете под свое меню.
Что мне здесь искать для изменения меню в css :
<div class="boxed">
'',
'theme_location' => 'secondary-menu',
'items_wrap' => '%3$s',
'depth' => 1,
«echo» => false,
);
if (has_nav_menu ('secondary-menu')) {
?>
<img src=".png" class="weather-icon" alt="« />
,
<a href="»><img src="" alt="« />
<a href="»>
<form method="get" action="" name="searchform">
<input type="text" placeholder="" value="« class=»search-box" name="s" id="s" />
<a href=""><img src="" alt="« />
<a href="»>
Pawel, пользуйтесь фаербагом, очень удобный и понятный инструмент.
Хорошо, попробую ,
в этой теме quadrum-premium много css и java.
Всё равно Спасибо