Медиа-запросы CSS – адаптивная верстка

Обновлено: Андрей HTML и CSS

В одной из предыдущих статей мы уже обсуждали тему создания мобильной версии для 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) {
  /* ... */
}

Устройства для печати, такие как принтеры.

/* Стили для печати */
@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), удостоверьтесь, что разрешение вашего экрана соответствует указанным значениям.

Попробуйте другие браузеры

Если медиа-запросы не работают в одном браузере, попробуйте проверить их в другом. Иногда проблемы могут быть связаны с конкретным браузером.

Читайте также:
21 комментарий
1 2

  1. Добрый вечер , такой вопрос : есть Меню когда нажимаешь идёт вертикальное меню в стиле

    меню 1 меню 2 и меню 3 они сразу развёрнуты , как сделать так чтобы при нажатии на кнопку Меню они выходили в свёрнутом виде ? (всё та же тема quadrum-theme ).

    Ответить

    1. Pawel, Добрый вечер! Судя по всему это так задумано... посмотрите варианты подобного меню, как там реализована эта деталь, а дальше просто подстраиваете под свое меню.

      Ответить

  2. Что мне здесь искать для изменения меню в 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="»>

    Ответить
1 2
Оставить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *