CSS - Медиа запросы (media queries)

Александр Мальцев
Александр Мальцев
168K
40
Содержание:
  1. Что такое медиа запросы
  2. Синтаксис медиа запросов
  3. Код JavaScript, учитывающий параметры устройств
  4. Комментарии

Статья, в которой познакомимся с медиа запросами и научимся применять их для создания адаптивных сайтов. Рассмотрим основные конструкции media запросов для использования их в вёрстке страниц с использованием фреймворков Bootstrap 3 и Bootstrap 4.

Что такое медиа запросы

Медиа запросы (media queries) - это правила CSS, которые позволяют управлять стилями элементов в зависимости от значений технических параметров устройств. Иными словами, это конструкции, которые позволяют определять на основании некоторых условий какие стили необходимо использовать на веб-странице, а какие нет.

Медиа запросы появились в спецификации CSS3 и на сегодняшний день поддерживаются во всех современных браузерах (Chrome 4+, Firefox 3.5+, IE 9+, Opera 9+, Safari 4+).

Поддержка браузерами CSS3 медиа запросов (media queries)
Поддержка браузерами CSS3 медиа запросов (media queries)
Поддержка медиа запросов в браузере IE8 осуществляется посредством подключения к странице скрипта respond.js:
<!-- Respond.js для IE8 (media queries) -->
<!-- ПРЕДУПРЕЖДЕНИЕ: Respond.js не будет работать при просмотре страницы через file:// -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

Медиа запросы предназначены для создания адаптивных дизайнов сайтов. Адаптивный дизайн отличается от других тем, что он может "приспосабливаться" (видоизменяться) в зависимости от того, какую ширину экрана имеет устройство (браузер). Более подробно познакомиться с адаптивным дизайном можно в статье "Что такое адаптивная разметка".

Но при создании адаптивных веб-страниц также необходимо обратить внимание на метатег viewport. Данный тег обеспечивает корректное отображение дизайнов адаптивных сайтов на экранах устройств, имеющих высокую плотность пикселей. Иными словами, он устанавливает соответствие между CSS и физическим разрешением веб-страницы. Более подробно разобраться, как работает метатег viewport можно в статье "Знакомство с meta viewport".

Подключение метатега viewport к странице в большинстве случаях осуществляется так:

<meta name="viewport" content="width=device-width, initial-scale=1">

Синтаксис медиа запросов

Для создания медиа запросов используется следующий синтаксис:

@media условие {
/* стили (они будут выполняться, если устройство соответствует указанному условию)
}

Основные типы устройств:

  • all - все устройства (по умолчанию).
  • print - принтеры и режим предварительного просмотра страницы перед печатью.
  • screen - устройства с дисплеями.

Логические операторы:

  • and - требует обязательного выполнения всех указанных условий.
    Например:
    @media screen and (min-width: 1200px) and (orientation: landscape) { /* Стили CSS ... */ }
    Стили CSS в вышеприведённом примере выполняться только в том случае, если страница будет выводиться на устройство с экраном, иметь область просмотра более 1200 пикселей в ширину, а также находиться в альбомном режиме.
  • , (запятая) - требует обязательного выполнения хотя бы одного из указанных условий в медиа запросе.
    @media (min-width: 544px), (orientation: landscape) { /* Стили CSS ... */ }
    Стили CSS в этом примере будут применяться к странице в двух случаях. Т.е. тогда, когда устройство будет иметь viewport не менее 544 пикселей (включительно) или ориентацию landscape.
  • not - предназначен для отрицания указанного условия. Имеет по отношению к оператору and меньший приоритет, т.е. оператор not всегда выполняется после and.
    @media not screen and (orientation: portrait), (min-width: 992px) { /* Стили CSS ... */ }
    Стили CSS, находящиеся в этом правиле, будут применены к странице только в том случае, если устройство не является screen и не будет иметь портретную ориентацию. А также они (стили CSS) будут применены к элементам документа ещё тогда, когда устройство (браузер) будет иметь ширину рабочей области не менее 992 пикселя (включительно).
    Т.е. запрос в вышеприведённом примере будет обрабатываться так:
    @media not (screen and (orientation: portrait)), (min-width: 992px) { /* Стили CSS ... */ }

Медиа функции

Для составления условия в @media можно использовать следующие фукнции:

  • width - указывает требования к ширине области просмотра устройства (браузера).
    /* применить стили CSS только для устройств с шириной области просмотра, равной 320px */
    @media (width: 320px) { /* Стили CSS ... */ }
    
  • min-width - задаёт минимальную ширину области viewport в px, em или других единицах.
    /* для устройств (браузеров), которые предоставляют для страницы минимальную ширину области просмотра, равную 544 пикселя */
    @media (min-width: 544px) { /* Стили CSS ... */ }
    
  • max-width - указывает на то, какой должна быть максимальная рабочая область устройства (браузера).
    /* стили, которые будут применены к элементам страницы с рабочей областью не больше 1199 пикселей */
    @media (max-width: 1199px) { /* Стили CSS ... */ }
    
  • height, min-height и max-height - задают требования аналогично вышеприведённым функциям, но в отношении высоты viewport.
    /* стили, которые будут применены к элементам страницы в том случае, если viewport браузера будет больше 720px в высоту */
    @media (min-height: 720px) { /* Стили CSS ... */ }
    
  • orientation - функция, которая проверяет то, в каком режиме (portrait или landscape) отображается страница.
    Пример, в котором в зависимости от ориентации экрана, отображается одна или другая картинка:
    /* landscape (альбомный) - это режим, в котором наоборот ширина viewport больше её высоты */
    @media (orientation: landscape) { 
      #background-image { background: url(image1.png) no-repeat; }
    }
    
    /* portrait (портретный) - это режим, в котором высота viewport больше ширины */
    @media (orientation: portrait) { 
      #background-image { background: url(image2.png) no-repeat; }
    }  
    
  • aspect-ratio (min-aspect-ratio, max-aspect-ratio) - позволяют указать то, как ширина устройства должна относиться к высоте. В качестве значений допускается использовать только целые значения.
    /* для дисплеев с соотношением сторон 16/9 */
    @media screen and (device-aspect-ratio: 16/9) { /* Стили CSS ... */ }
    
    /* для дисплеев с соотношением сторон 1336/768 */
    @media screen and (device-aspect-ratio: 1336/768) { /* Стили CSS ... */ }
    
  • resolution (min-resolution, max-resolution) - указывает разрешение (плотность пикселей) устройства вывода. В качестве единиц измерения разрешения используются следующие величины: dpi (количество точек на дюйм), dpcm (количество точек на сантиметр), dppx (количество точек на пиксель).
    /* для экранов, имеющих высокую плотность пикселей 
       (т.е. для таких, у которых отношение аппаратных пикселей к CSS не менее 2) */
    @media screen and (min-resolution: 2dppx) { /* Стили CSS ... */ }
    
    /* при печати с разрешением свыше 300 точек на дюйм */
    @media print and (min-resolution: 300dpi) { /* Стили CSS ... */ }
    

Использование медиа-запросов при подключении файлов CSS

Медиа запросы также можно применять в качестве значения атрибута media элемента link. Это позволит в зависимости от параметров устройства определить, какие файлы CSS необходимо подсоединить к странице, а какие нет. Обычно данный функционал используется тогда, когда к разным классам устройств необходимо применить различные стили CSS.

<!-- Стили xs-styles.css будут подсоединены к странице только на устройствах c шириной меньше 543 пикселей (включительно) -->
<link rel="stylesheet" media="screen and (max-width: 543px)" href="styles-xs.css">

Кроме этого медиа запросы можно также использовать в правиле @import, которое предназначено для импортирования стилей из других файлов CSS в текущий.

/* импортирование стилей из файла styles-xs.css в текущий файл стилей только для устройств, которые предоставляют веб-странице viewport, имеющий ширину 543 пикселя или меньше. */
@import url(styles-xs.css) (max-width: 543px);

Медиа запросы для Bootstrap 3

Организация media queries в порядке возрастания классов устройств xs, sm, md и lg (по умолчанию):

/* Устройства с очень маленьким экраном (смартфоны, меньше 768px) */
/* Стили CSS (по умолчанию) - для ширины viewport <768px */

/* Устроства с маленьким экраном (планшеты, 768px и выше) */
@media (min-width: 768px) {
/* Стили для устройств с шириной viewport, находящейся в диапазоне 768px - 991px */
}

/* Устройства со средним экраном (ноутбуки и компьютеры, 992px и выше) */
@media (min-width: 992px) {
  /* Стили для устройств с шириной viewport, находящейся в диапазоне 992px - 1199px */
}

/* Устройства с большим экраном (компьютеры, 1200px и выше) */
@media (min-width: 1200px) {
  /* Стили для устройств с шириной viewport >1200px */
}

Вышеприведённые запросы необходимо использовать только в указанном порядке.

Для того чтобы media запросы можно было применять в какой угодной последовательности, их необходимо расширить включив в них дополнительно выражение max-width. Это заставит их работать только в указанном диапазоне.

@media (max-width: 767px) {
  /* стили для xs-устройств */
}
@media (min-width: 768px) and (max-width: 991px) {
  /* стили для sm-устройств */
}
@media (min-width: 991px) and (max-width: 1199px) {
  /* стили для md-устройств */
}
@media (min-width: 1200px) {
  /* стили для lg-устройств */
}

Медиа запросы для Bootstrap 4

Синтаксис медиа-запросов для Bootstrap 4, которые можно использовать только в следующем порядке (последовательного увеличения минимальной ширины viewport):

/* xs - устройства (до 576px) */
/* CSS для ширины, которая меньше 575px (включительно) */

/* sm-устройства (больше или равно 576px) */
@media (min-width: 576px) {
  /* CSS для: 576px <= ширины <= 767px */
}

/* md-устройства (больше или равно 768px) */
@media (min-width: 768px) {
  /* CSS для: 768px <= ширины <= 991px */
}

/* lg-устройства (больше или равно 992px) */
@media (min-width: 992px) {
  /* CSS для: 992px <= ширины <= 1119px */
}

/* xl-устройства (больше или равно 1200px) */
@media (min-width: 1200px) {
  /* CSS для: ширины >= 1200px */
}

Список media запросов для фреймворка Bootstrap 4, которые можно применять только в обратном порядке (в порядке убывания ширины области просмотра окна браузера):

/* xl-размер (>=1200px) */
/* CSS для >=1200px */

/* lg-размер (<=1199px) */
@media (max-width: 1199px) {
  /* CSS для ширины от 992px до 1199px */
}

/* md-размер (<=991px) */
@media (max-width: 991px) {
  /* CSS для ширины от 768px до 991px */
}

/* sm-размер (<=768px) */
@media (max-width: 767px) { 
  /* CSS для ширины от 576px до 767px */
}

/* xs-размер (<=575px) */
@media (max-width: 575px) {
  /* CSS для ширины до 575px (включительно) */
}

Перечень медиа-запросов для Bootstrap 4, которые можно использовать в таблице стилей в любой последовательности:

/* xs (<=543px) */
@media (max-width: 575px) { ... }

/* sm (>=576 и <=767) */
@media (min-width: 576px) and (max-width: 767px) { ... }

/* md (>=768 и <=991) */
@media (min-width: 768px) and (max-width: 991px) { ... }

/* lg (>=992 и <=1199) */
@media (min-width: 992px) and (max-width: 1199px) { ... }

/* xl (>=1200) */
@media (min-width: 1200px) { ... }

Код JavaScript, учитывающий параметры устройств

Наиболее простой способ создания кода JavaScript, учитывающий параметры устройств (аналогично CSS медиа запросам), осуществляется с помощью метода matchMedia объекта window.

Осуществляется это следующим образом:

// например, проверим, соответствует ли указанный медиа запрос (screen and (max-width: 543px)) устройству
// результат проверки можно получить с помощью свойства matches (true или false)
if (window.matchMedia('screen and (max-width: 543px)').matches) {
  // ... действия, если устройство отвечает медиа запросу
} else {
  // ... действия, если устройство не соответствует значениям медиа запроса
}

Например, эту возможность можно применить для асинхронной загрузки картинок в зависимости от того какой размер viewport имеет устройство (браузер).

Метод matchMedia не поддерживается Internet Explorer 9 и другими старыми браузерами. Для того чтобы обеспечить эту функциональность в старых браузерах можно воспользоваться методом mq библиотеки Modernizr.

Поддержка браузерами метода matchMedia (JavaScript) - ноябрь 2016
Поддержка браузерами метода matchMedia (JavaScript) - ноябрь 2016
if (Modernizr.mq('(max-width: 767px)')) {
  // ... действия, если устройство соответсвуют указанному медиа условию
} else {
  // ... действия, если устройство не отвечает заданному медиа условию
}

Комментарии:

  1. twelve
    24 июля 2021, 20:42
    Благодарю Вас автор отличная статья, я не опытный пользователь но за 2 дня разобрался.
    И вот результат: spacser-shop.com.ua еще сыроват, но все еще впереди еще с меню бургер или гамбургер разберусь и будет топ.
    До этого стоял и стоит код от Гугл: «viewport» content=«width=device-width, initial-scale=1.0»,
    прокатывал под моб. версию, но что-то с 2021 г. начал замечать в search.google.com-Удобство для мобильных, что 1-5 страницы Ошибка в кладка Удобство для мобильных, ха, 1-5 страниц, не обращал внимание, ну и тут пришло до 100 страниц и с каждым днем +20 страниц.
    Но вашей статьей очень доволен Спасибо.
    1. евгений
      04 марта 2021, 18:36
      Добрый день! Подскажите, пожалуйста, как перестроить расположение блоков в зависимости от устройства?
      Я создал 3 варианта расположения блоков (в коде html). Как сделать так, чтоб блоки меняли размеры и перестраивались в зависимости от ширины экрана? Необходимо использовать медиа-запросы или JavaScript?

      <!doctype html>
      <html lang="ru">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Выбор устройства</title>
        <link rel="stylesheet" href="css/bootstrap-grid.css">
        <link rel="stylesheet" href="main.css">
        
      </head>
      <body>
      <h1>Таблица для разных экранов</h1>
      <!-- Смартфон: экран до 768px -->
      <div class="01 container">
        <div class="row">
           <div class="col-6" id="xs1">1</div>
           <div class="col-6" id="xs2">2</div>
      	 <div class="col" id="xs3">3</div>
        </div>
      </div>
      
      <!-- Планшет: экран 768px - 1200px -->
      <div class="02 container">
        <div class="row">
           <div class="col-md-2" id="md1">1</div>
           <div class="col-md-5" id="md2">2</div>
      	 <div class="col-md-5" id="md3">3</div>
        </div>
      </div>
      
      <!-- Десктоп: >= 1200px -->
      <div class="03 container">
        <div class="row">
           <div class="col-xl-4" id="xl1">1</div>
           <div class="col-xl-5" id="xl2">2</div>
      	 <div class="col-xl-3" id="xl3">3</div>
        </div>
      </div>
      
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="js/popper.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
      </body>
      </html>
      
      itchief.ru/assets/uploadify/5/9/c/59c63aef28c88df1635473555b1d5c3e.png

      Спасибо!
      1. евгений
        06 марта 2021, 10:08
        уже разобрался
        1. Александр Мальцев
          08 марта 2021, 15:48
          Привет! Отлично!
      2. Ola
        05 октября 2020, 18:50
        Супер! Спасибо Вам большое за ваше время и работу!!!
        1. Александр Мальцев
          08 октября 2020, 14:06
          Спасибо! Очень приятно читать такие отзывы.
        2. Olha
          28 июля 2020, 22:39
          Здравствуйте. Подскажите, пожалуйста, можно ли с помощью медиа запроса «разбить» блок? при отображении на ширине 480px должен отображаться один блок с текстом, а при 1000рх и больше — он должен разбиваться на два одинаковых по ширине, по бокам страницы.
          вот этот код даёт только один блок слева при 1000рх, как получить второй?
          body {
            min-width: 480px;
            overflow-x: hidden;
          }
          .company__left { 
            border-top: 8px solid #1C5395;
            border-bottom: 8px solid #D28C57;
            background-color: #FCFCFD;
            position: absolute;
            width: 365px;
            height: 1148px;
            left: calc(50% - 365px/2 - 0.5px);
            top: 6011px;
          }
          
          @media (min-width: 768px) {
            .company__left {
              height: 980px;
              left: calc(50% - 365px/2 - 133.5px);
              top: 4748px;
            }
          }
          
          @media (min-width: 1000px) {
            .company__left {
              height: 605px;
              left: calc(50% - 365px/2 - 317.5px);
              top: 4748px;
            }
          }
          
          @media (min-width: 1920px) {
            .company__left {
              width: 479px;
              left: calc(50% - 479px/2 - 400.5px);
              top: 3846px;
            }
          }
          
          1. Александр
            05 августа 2020, 19:04
            Привет, я делаю автофилия или же автозаполнение данных и столкнулся с такой проблемой, что делать?
            Вот видео :https://yadi.sk/i/iU9sBd6YiSWMYA (20 секнуд)и если не. трудно не могли бы вы телеграмм оставить?
            1. Александр Мальцев
              30 июля 2020, 15:31
              Здравствуйте. Вам необходимо создать 2 блока. На маленьких экранах в этом случае следует отображать один блок, а второй – скрывать (display: none). На больших экранах отображать 2 блока с нужной шириной. Это если вам нужно создать именно блоки.
              Если нужно просто разбить контент, то можно использовать колонки (column-count). Про создание многоколоночного текста можно почитать в этой статье.
              1. Olha
                02 августа 2020, 09:29
                Да, нужны блоки. Получается на большом экране должно быть два блока с текстом и картинка между ними. А на маленьком — один блок с текстом из двух больших блоков, и картинка уже под этим блоком…
                1. Александр Мальцев
                  03 августа 2020, 14:25
                  Это можно выполнить с помощью CSS Flexbox и медиа-запросов.
            2. Алексей Чернавцев
              28 июля 2020, 17:03
              Добрый день!
              Такой вопрос, применил в js

              if (window.matchMedia('screen and (max-width: 543px)').matches) {}

              Всё работает, но! например, при повороте экрана на большой мобилке не отображается большое меню (а должно), плюс пользователь всегда может сжать браузер

              Отсюда вопрос: как сделать так, чтобы js «слушал» изменение размера?
              1. Александр Мальцев
                30 июля 2020, 15:24
                Здравствуйте!
                Так, конечно, у вас код сработает один раз.
                В этом случае его нужно добавить в обработчик события, который будет вызываться при смене размеров экрана:
                window.onresize = function(){
                  if (window.matchMedia('screen and (max-width: 543px)').matches) {}
                };
                
                1. Алексей Чернавцев
                  31 июля 2020, 16:11
                  Большое спасибо :)
              2. AleksLT
                29 октября 2019, 18:24
                Может кому-то поможет. Все дело было в работе LiveServer для VSCode. При стандартном открытии html документа все брейкопинты работают хорошо)
                1. AleksLT
                  29 октября 2019, 00:05
                  Добрый день, подскажите: использую Bootstrap 4.3.1. Сделал макет при помощи готовых классов. При включении панели разработчика и настройки адаптивности, возникла проблема. до 512px работают классы col-sm, с 512px до 660px col-md, с 660px до 799px col-lg. В документации идут значения 576px, 768px, 992px и 1200px. Почему у меня стили присваиваются на непонятных значениях ширины?
                  <div class="main">
                          <div class="container">
                              <div class="header">
                                  <div class="row">
                                      <div class="col-sm-12 offset-sm-0 col-md-12 offset-md-0 col-lg-6 offset-lg-0">
                                          <div class="main-logo">
                                              <img src="../src/img/logo.png" alt="company logo">
                                              <h2>Заголовок</h2>
                                              <p>Текст</p>
                                          </div>
                                      </div>
                                      <div class="col-sm-12 offset-sm-0 col-md-12 offset-md-0 col-lg-6 offset-lg-0">
                                          <div class="contact">
                                              <div class="contact-block">
                                                      <p></p>
                                                      <p></p>
                                                      <a href="#" class="vk"></a>
                                                      <a href="#" class="inst"></a>
                                              </div>
                                          </div>
                                  </div>
                              </div>
                          </div>
                          </div>
                  </div>
                  
                  1. Александр Мальцев
                    29 октября 2019, 01:19
                    Привет!
                    576px, 768px, и т.д. — это значения по умолчанию. Их можно изменить. Скорее всего вы используете сборку Bootstrap, в которой эти значения по умолчанию переопределены.
                    1. AleksLT
                      29 октября 2019, 11:33
                      Спасибо большое за ответ, но до этого делал сайт с точно такой же сборкой, сейчас юзаю его все хорошо брейкпоинты стандартные работают.



                      Извиняюсь может я слишком загнался по этому вопросу и можно закончить проект с теми брейкпоинтами что есть, но очень хочется разобраться как это работает)
                      1. Александр Мальцев
                        29 октября 2019, 13:15
                        Это работает очень просто.

                        Первое CSS правило отрабатывает всегда. Оно задаёт .container 100% ширину того блока, в который он помещён и центрирует его в нём в горизонтальном направлении по центру. Если ширина viewport меньше 576px, то остальные правила не отрабатывают. В остальных правилах имеются условия, и они будут отрабатывать только в том случае, если ширина viewport бразуера пользователя будет не меньше указанной величины (min-width).

                        Если ширина viewport браузера пользователя больше или равно 576px и меньше 768px то к .container применятся все CSS свойства заданные в первом правиле и CSS свойство max-width: 540px. Т.к. 2 правило проходит по условию.

                        Если ширина viewport бразуера пользователя больше или равно 768px и меньше 992px, то к .container применятся все CSS свойства, заданные в первом правиле, max-width: 540px и max-width: 720px. Т.к. 2 и 3 правило проходит по условию. Но CSS свойство max-width: 720px расположено ниже по коду, чем CSS-свойство max-width: 540px. В результате будет применены все CSS свойства, заданные в первом правиле и max-width: 720px.

                        И т.д.
                  2. Иван
                    22 сентября 2019, 16:25
                    Перечень медиа-запросов для Bootstrap 4, которые можно использовать в таблице стилей в любой последовательности:
                    
                    /* xs (<=543px) */
                    @media (max-width: 575px) { ... }
                     
                    /* sm (>=576 и <=767) */
                    @media (min-width: 576px) and (max-width: 767px) { ... }
                     
                    /* md (>=768 и <=991) */
                    @media (min-width: 768px) and (max-width: 991px) { ... }
                     
                    /* lg (>=992 и <=1199) */
                    @media (min-width: 992px) and (max-width: 1199px) { ... }
                     
                    /* xl (>=1200) */
                    @media (min-width: 1200px) { ... }
                    Добрый день! У меня такой вопросик возник по данной конструкции. Правильно ли я понял, что последняя строка @media (min-width: 1200px) {… } здесь не обязательна, т.к. после (min-width: 992px) and (max-width: 1199px) будут срабатывать наши основные стили.
                    1. Александр Мальцев
                      23 сентября 2019, 08:06
                      Привет! Эта строка обязательна. Если например viewport имеет ширину 1000px, то сначала сработает эта конструкция:
                      @media (min-width: 992px) and (max-width: 1199px) { ... }
                      
                      После неё сработают следующие стили, т.к. они не заключены в @media (min-width: 1200px) { … }. В этом случае они переопределят те что были, т.к. они идут после них.
                    2. Иван
                      17 июня 2019, 10:22
                      Здравствуйте! Спасибо за статью… но помогите разобраться, я никак не могу понять и всё время путаюсь, каким образом делается адаптивность через @media (min-width). Я все время использую @media (max-width). Мне дают макет, я по нему делаю верстку, а потом уменьшаю экран и пишу медиазапросы @media (max-width)… Но min-width идет от меньшего к большему и у меня всё в голове «ломается», ведь изначально уже сделано всё для большего размера, а тут получается каждый брейкпоин идет к большему. Подскажите, как их правильно применять?
                      1. Александр Мальцев
                        17 июня 2019, 14:48
                        "@media (min-width)" удобно использовать, когда вы при разработке дизайна используете стратегию «Mobile First», т.е. сначала пишите стили для отображения страниц на самых маленьких экранах, затем переходите к более крупным и так далее.
                        В этом случае вы в самом начале пишите стили для самых маленьких устройств без использования "@media (min-width)".
                        /* дефолтные стили */
                        h1 {
                          font-size: 20px;
                          font-weight: bold;
                        }
                        
                        Затем переходите к следующей ширине после самых маленьких устройств. На этом этапе переопределяете существующие стили, если они должны для данной ширины иметь другой вид, и при необходимости добавляете новые. Для этого вы их заключаете в "@media (min-width)".
                        @media (min-width: 576px) {
                          h1 {
                            font-size: 24px;
                          }
                        }
                        
                        При этом этот фрагмент стилей должен располагаться после дефолтных стилей.
                        Затем переходите к следующей ширине и т.д. При этом важно соблюдать порядок следования фрагментов, т.е. сначала стили без "@media (min-width)", потом, например, с использованием правила "@media (min-width: 576px)", далее с "@media (min-width: 768px)" и т.д.

                        Если вы проектируете, начиная с самого большого размера, то в этом случае лучше создавать наоборот. Т.е. сначала создаёте дефолтные стили, которые будут определять дизайн веб проекта на самых больших экранах. Далее переходите к более маленьким. На каждом из этих этапов вы переопределяете существующие стили, действующие на эту ширину и заключаете их в @media (max-width), чтобы их действие не распространилась на более большую ширину. Но этот вариант разработки обычно не используют, предпочитая стратегию «Mobile First.
                        1. Иван
                          17 июня 2019, 18:40
                          Спасибо за развернутый ответ! Я конечно, не так давно верстаю, но всё что не смотрю видео уроки, примеры и т.д., везде начинают с верстки макета как он есть, т.е. самый большой размер, а потом уменьшают. Мне стало интересно, т.е. главный CSS файл нужно начать писать для самого маленького разрешения, а потом расширять? У меня сразу в голове прокручивается картина: а как так можно подгадать всё, чтобы дойдя до самого большого размера всё сошлось с макетом, все верхние-нижние отступы и т.д. Ведь когда делаешь вначале по макету, то делаешь почти pix-to-pix, а потом уже произвольно уменьшаешь, чтобы смотрелось. А в случае с «Mobile First», получается мы наугад задаём размеры для мобильного вида и потом увеличиваем их… это ведь надо так подгадать, чтобы в итоге по макету встало *) Или на практике, это не так сложно?
                          P.S: нет ли у вас на сайте видео примера такой верстки?
                          1. Александр Мальцев
                            19 июня 2019, 01:06
                            Таких видео примеров нет. Но, их можно поискать в Youtube по ключевой фразе «Mobile First». В случае если имеется только большая картинка по который вы строите макет, то придётся просто всё более тщательно продумывать. Начинайте создавать макет, начиная c основного каркаса и сразу под все устройства, начиная с мобильных. Потом переходите к детализации основных структурных блоков, далее к детализации того, что ещё не детализировано и т.д. При этом необходимо создавать так, чтобы готовый блок в некоторой ячейке вашего макета можно было просто перенести в другую ячейку вашего макета без изменения кода CSS. При этом если нужно «pix-to-pix», то оставляйте это под конец. В конце, когда макет будет готов под все устройства немного измените стили для больших экранов, чтобы получить его «pix-to-pix».
                      2. shohinform
                        17 января 2019, 23:25
                        можно ли написать media запрос для каждого карусела?
                        1. Александр Мальцев
                          22 января 2019, 15:21
                          Не знаю что такое «карусела». Медиа-запросы можете написать под любые размеры, так как вам нужно.
                        2. Sergey Ionov
                          02 июня 2018, 13:43
                          max-width — указывает на то, какой должна быть максимальная рабочая область устройства (браузера).
                          /* стили, которые будут применены к элементам страницы с рабочей областью больше 1199 пикселей */
                          @media (min-width: 1199px) { /* Стили CSS ... */ }
                          Этот пример наверное стоило бы переписать так:
                          /* стили, которые будут применены к элементам страницы с рабочей областью не больше 1199 пикселей */
                          @media (max-width: 1199px) { /* Стили CSS ... */ }
                          1. Александр Мальцев
                            05 июня 2018, 13:51
                            Спасибо за дельные замечания. Все эти моменты поправил в статье.
                          2. Sergey Ionov
                            02 июня 2018, 13:32
                            , (запятая) — требует обязательного выполнения хотя бы одного из указанных условий в медиа запросе.
                            @media (min-width: 544px), (orientation: landscape) { /* Стили CSS ... */ }
                            Стили CSS в этом примере будут применяться к странице в двух случаях. Т.е. тогда, когда устройство будет иметь viewport не менее 1200 пикселей (включительно) или ориентацию landscape.
                            Наверное здесь хотели написать не 1200, а 544 пикселей?
                            1. Андрей
                              21 мая 2018, 14:54
                              пишу
                              @media (mах-width: 768px)
                              размер экрана iphone se 1136x640 то есть по идее на портерной ориентации он должен сработать, а на альбомной — нет, но по факту получается что он срабатывает и в том и другом случае.
                              Если изменять окно браузера то все работает корректно, на телефонах по другому пиксели считаются?
                              1. Александр Мальцев
                                21 мая 2018, 15:29
                                Познакомьтесь с тем, как работает viewport. На данном устройстве скорее всего установлен коэффициент 2 (CSS разрешение 568х320 пикселей). Т.е. один CSS пиксель формируется с помощью 4 физических пикселей.
                              2. aliya
                                18 ноября 2017, 14:42
                                Здравствуйте, хотелось бы узнать, как вы сделали меню на этом сайте? мой респект)) если не секрет, конечно
                                1. Александр Мальцев
                                  18 ноября 2017, 17:07
                                  Здравствуйте! Конечно не секрет, это обычное Bootstrap меню (компонент Navbar).
                                2. Андрей
                                  02 ноября 2017, 23:22
                                  Здравствуйте! Подскажите, можно ли в Bootstrap 4 задать дополнительный медиазапрос, например, для 1300px?
                                  1. Александр Мальцев
                                    03 ноября 2017, 16:30
                                    Здравствуйте! Если нужно, конечно создавайте. Тут нет разницы, используете ли вы Bootstrap или нет.
                                    Например, для экранов, имеющих минимальную ширину 1300px:
                                    /* >=1300 */
                                    @media (min-width: 1300px) {
                                      /* ... */
                                    }
                                  2. Александр
                                    27 февраля 2017, 09:42
                                    Александр, приветствую.
                                    Начал разбираться с медиа запросами почитал примеры на хабре попробовал ради эксперимента, и сразу же столкнулся с вопросом.
                                    Ниже код:
                                    <html>
                                    <head>
                                    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
                                    <meta http-equiv="Content-Language" content="ru">
                                    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
                                    <title>MediaQueryes</title>
                                    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
                                    <link href="https://fonts.googleapis.com/css?family=Fira+Sans+Condensed:300,400,600|Play:400,700&subset=cyrillic-ext" rel="stylesheet">
                                    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
                                    <style>
                                    	#companyAbout {
                                    	  background: url(/images/parallax/00004.jpg) center no-repeat fixed; 
                                    	  background-size: cover;
                                    	  min-height: 100vh;
                                    	  height: 100vh;
                                    	  margin: 0 auto;
                                    	  width: 100%;
                                    	  max-width: 2400px;
                                    	  position: relative;
                                    	  background:black;
                                    	}
                                    	#companyAbout article {
                                    	  height: 80%;
                                    	  position: absolute;
                                    	  text-align: center;
                                    	  top: 10%;
                                    	  width: 100%;
                                    	  color:#ffffff;
                                    	  padding-left:15%;
                                    	  padding-right:15%;
                                    	  font-family:'Fira Sans Condensed', sans-serif;
                                    	  font-size: 18px;
                                          line-height: 1.7;
                                    	  display:inline-block;
                                    	}
                                    	.companyAbout-img{
                                    		display:inline-block;
                                    		border:0px none;
                                    		background:none;
                                    	}
                                    	.accentuation{
                                    		width:200px;
                                    		height:1px;
                                    		margin-top:7px;
                                    		border-top:1px solid #ffffff;
                                    		margin-bottom:40px;
                                    	}
                                    	.companyAbout-bottom{
                                    		border:0px none;
                                    		background:none;
                                    		margin-top:40px;
                                    	}
                                    	.companyAbout-slogan{
                                    		font-family:'Play', sans-serif;
                                    		font-weight:500;
                                    		font-size:22px;
                                    	}
                                    /*-- BlackBerry Z30 --*/
                                    		/*-- 640 x 360 landscape --*/
                                    		@media screen and (min-width:360px) and (max-width:640px) { 
                                    			#companyAbout article{
                                    				font-size:14px;
                                    				top:5%;
                                    				padding-left:5%;
                                    				padding-right:5%;
                                    				line-height: 1.2;
                                    			}
                                    			.companyAbout-slogan{
                                    				font-size:17px;
                                    			}
                                    			.accentuation{
                                    				margin-bottom:10px;
                                    			}
                                    			.companyAbout-bottom{
                                    				margin-top:10px;
                                    			}
                                    			.toHide{
                                    				display:none;
                                    			}
                                    		} 
                                    		/*-- 640 x 360 portrait --*/
                                    		@media screen and (max-width:360px) { 
                                    			#companyAbout article{
                                    				font-size:16px;
                                    				top:5%;
                                    				padding-left:5%;
                                    				padding-right:5%;
                                    				line-height: 1.3;
                                    			}
                                    			.companyAbout-slogan{
                                    				font-size:18px;
                                    			}
                                    			.accentuation{
                                    				margin-bottom:15px;
                                    			}
                                    			.companyAbout-bottom{
                                    				margin-top:15px;
                                    			}
                                    			.toHide{
                                    				display:none;
                                    			} 
                                    		}
                                    /*-- BlackBerry PlayBook --*/
                                    		/*-- 1024 x 600 landscape --*/
                                    		@media screen and (min-width:600px) and (max-width:1024px) { 
                                    			#companyAbout article{
                                    				font-size:17px;
                                    				top:10%;
                                    				padding-left:15%;
                                    				padding-right:15%;
                                    				line-height: 1.45;
                                    			}
                                    			.companyAbout-slogan{
                                    				font-size:22px;
                                    			}
                                    			.accentuation{
                                    				margin-bottom:20px;
                                    			}
                                    			.companyAbout-bottom{
                                    				margin-top:20px;
                                    			}
                                    		} 
                                    		/*-- 1024 x 600 portrait --*/
                                    		@media screen and (max-width:600px) { 
                                    			#companyAbout article{
                                    				font-size:20px;
                                    				top:10%;
                                    				padding-left:10%;
                                    				padding-right:10%;
                                    				line-height: 1.7;
                                    			}
                                    			.companyAbout-slogan{
                                    				font-size:24px;
                                    				line-height: 1.4;
                                    			}
                                    			.accentuation{
                                    				margin-bottom:40px;
                                    			}
                                    			.companyAbout-bottom{
                                    				margin-top:40px;
                                    			}
                                    		}
                                    </style>
                                    
                                    </head>
                                    
                                    <body>
                                    <section id="companyAbout" data-type="background" data-speed="10" class="pages">
                                      	  <article>
                                            <div class="companyAbout-img">
                                            	<img src="images/logo_offcanvas.svg" alt="Logo"/>
                                            </div>
                                            <hr class="accentuation">
                                            <!--<div class="accentuation"></div>-->
                                          	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p>
                                            <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
                                            <p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?.</p>
                                            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>
                                            <div class="companyAbout-bottom">
                                            	<span class="companyAbout-slogan">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
                                            </div>
                                          </article>
                                    
                                    </section>
                                    
                                    </body>
                                    </html>
                                    Просматриваем в Chrome.
                                    По F12 открываем консоль, включаем просмотр на разных устройствах и начинаем с самого начала. BlackBerry Z30 с размерами 360 на 640 — прописали медиазапросы, все входит, при обеих ориентациях, — все отлично.
                                    Переходим к следующему в списке BlackBerry PlayBook с размерами 600 на 1024, — прописали медиазапросы, подогнали, все отлично, возвращаемся на посмотреть, что произошло с BlackBerry Z30 — все уплыло.
                                    А там у Хрома еще очень длинный список…

                                    Подскажите, как в таких случаях бороться? Скорее даже вопрос во внятном пояснении принципов.
                                    1. Александр Мальцев
                                      28 февраля 2017, 16:49
                                      При создании адаптивной разметки необходимо определиться с основными контрольными точками. Например, 576px, 768px, 992px и 1200px. Эти точек может быть больше или меньше в зависимости от реализуемого макета. Эти точки должны определять изменения в верстке. Т.е. до 576px должна быть одна разметка, при 576px и выше другая, при 768px и больше тоже другая и т.д.

                                      При этом правила необходимо располагать в следующем порядке:
                                      /* устройства (до 576px) */
                                      /* стили... */
                                       
                                      /* >= 576px) */
                                      @media (min-width: 576px) {
                                        /* стили... */
                                      
                                      }
                                      /* >=768px) */
                                      @media (min-width: 768px) {
                                        /* стили... */
                                      
                                      }
                                      /* и т.д. */
                                      
                                      При этом не обязательно их ограничивать с помощью max-width. Т.е. если у вас в браузере CSS ширина рабочей области равно, например 600px. То будут применены CSS-свойства с условием min-width: 576px, т.к. они расположены после тех, которые предназначены для устройств до 576px. А стили для устройств >=768px применены не будут, т.к. текущая ширина устройства не отвечает этому условию.
                                      1. Александр
                                        01 марта 2017, 07:31
                                        Благодарю.
                                        То-есть порядок прописания контрольных точек критичен?
                                        1. Александр Мальцев
                                          01 марта 2017, 16:50
                                          Желательно делать так или жёстко определять диапазоны, чтобы вы знали, какие свойства CSS применятся к блокам.
                                          Т.е. нет смысла делать так:
                                          @media screen and (min-width:360px) and (max-width:640px) {
                                            .main {
                                              width: 100%;
                                            }
                                            /* стили... */
                                          }
                                          @media screen and (min-width:600px) and (max-width:1024px) {
                                            .main {
                                              width: 60%;
                                            }
                                            /* стили... */
                                          }
                                          @media screen and (max-width:600px) {
                                            .main {
                                              width: 80%;
                                            }
                                            /* стили... */
                                          }
                                          
                                          Т.е. если, например, устройство имеет ширину 375px, то в этом случае какая будет ширина? Другими словами, CSS правило из 1 media запроса никогда применится к блоку с классом main.
                                    Войдите, пожалуйста, в аккаунт, чтобы оставить комментарий.