Css медиа запрос: CSS — Медиа запросы (media queries)

CSS: Правило @media | медиа запросы

CSS предоставляет способ отображения содержимого веб-страницы по разному, в зависимости от устройства, на котором оно просматривается, или разрешения экрана (размера области просмотра в браузере) без необходимости изменения самого содержимого. Медиа запросы состоят из выражения, которое ограничивает область действия таблицы стилей и самой таблицы стилей, размещаемой в фигурных скобках.

Синтаксис

@media тип_устройства and|not|only (медиа_особенности) {
    CSS код;
}

Также можно включать различные стили для различных устройств вывода информации с помощью атрибута media тега link:

<link rel="stylesheet" media="тип_устройства and|not|only (медиа_особенности)"
 href="stylesheet.css">

Типы устройств

К сожалению тип устройства дает слишком мало информации, поэтому редко используется по прямому назначению. Современные смартфоны и планшеты, ноутбуки и настольные компьютеры идентифицируют себя как тип screen. Поэтому тип носителя обычно используется для различения экранных версий документа от печатных, что позволяет совершенно по разному их оформлять:

/* только для печати */
@media print {
  /* скрыть меню */
  #navigation { display: none; }

  /* начинать каждую новую страницу с заголовка h2 */
  h2 { page-break-before: always; }
}

Особенности устройств для медиа запросов

Наиболее важными из особенностей устройств для медиа запросов являются min-width и max-width, позволяющие создавать гибкие конструкции, в которых изменение макета сайта происходит на основе области просмотра браузера, установленного на устройстве.

Медиа запросы сочетают в себе тип устройства и условие, состоящее из одной или нескольких особенностей устройства. Например правила в следующем запросе применяются только при просмотре на экране с минимальной шириной области просмотра 600px:

@media screen and (min-width: 600px) {}

Медиа запросы не чувствительны к регистру, но скобки вокруг условия являются обязательной частью синтаксиса запроса. Оператор and здесь используется для объединения типа устройства с условием, но он также может объединять несколько особенностей устройства вместе:

@media (max-width: 500px) and (min-aspect-ratio: 1/1) {}

Этот медиа запрос имеет значение true, если устройство для просмотра имеет максимальное разрешение области просмотра 500px и соотношение сторон 1:1 (квадрат или ландшафтный просмотр). Обратите внимание, что в этом запросе нет типа устройства, поэтому это правило будет применяться ко всем типам устройств.

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

В дополнение к логическому оператору and (и), медиа запросы могут включать в себя логическое not (не), only (только) и or (или). Запятая (,) используется в качестве оператора or, то есть каждый запрос рассматривается индивидуально. Это означает, что с помощью запросов, разделенных запятой, можно одно правило @media ориентировать на различные типы устройств и их особенности.

Следующее правило @media применяется либо к устройству с минимальной областью просмотра 700px в ширину, либо если устройство находится в ландшафтном режиме просмотра:

@media (min-width: 700px), (orientation: landscape) {}

Оператор not используется для отрицания условий медиа запроса. Соответствующие стили применяются, если устройство не соответствует указанным вслед за not параметрам. Например следующее правило применяется только в том случае, если экран устройства не 800px в ширину:

@media not screen and (device-width: 800px) {}

Оператор only применяется, когда нужно скрыть правило @media от старых браузеров, которые не поддерживают описываемый синтаксис. Браузеры, которые поддерживают медиа запросы, оператор only просто проигнорируют.

/* Не работает в старых браузерах */
@media only screen and (min-width: 600px) {}

CSS Примеры Медиа запросов. Уроки для начинающих. W3Schools на русском

CSS Медиа-запросы — Больше примеров

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

Медиа-запросы — это популярный метод доставки адаптивной таблицы стилей на разные устройства. Чтобы продемонстрировать простой пример, мы можем изменить цвет фона для разных устройств:

Пример

/* Установите телесный цвет фона */
body {
 
background-color: tan;
}

/* На экранах с разрешением 992 пикселей и менее установите цвет фона синий */
@media screen and (max-width: 992px) {
  body {
   
background-color: blue;
  }
}

/* На экранах с разрешением 600px установите цвет фона оливковый */
@media screen and (max-width: 600px) {
 
body {
    background-color: olive;
  }
}

Попробуйте сами »

Вы задаетесь вопросом, почему мы используем точно 992px и 600px? Это то, что мы называем «типичными брэкпоинтами» (точки изменения) для устройств. Вы можете прочитать больше о типичных брэкпоинтах в нашем Учебнике по адаптивному веб-дизайну.

Медиа-запросы для меню

В этом примере мы используем медиа-запросы для создания адаптивного меню навигации, которое отличается дизайном на разных размерах экрана.

Большие экраны:

Маленькие экраны:

Пример

/* Контейнер navbar */
.topnav {
  overflow: hidden;
 
background-color: #333;
}

/* Navbar ссылки */
.topnav a {
  float:
left;
  display: block;
  color:
white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* На экранах шириной 600px или меньше, сделайте ссылки меню сложенными друг на друга, а не рядом друг с другом. */
@media screen and (max-width: 600px) {
 
.topnav a {
    float: none;
    width:
100%;
  }
}

Попробуйте сами »

Медиа-запросы для столбцов

Распространенное использование медиа-запросов, заключается в создании гибкого макета. В этом примере мы создаем макет, который варьируется между четырьмя, двумя столбцами и столбцами полной ширины в зависимости от размеров экрана:

Большие экраны:

Средние экраны:

Маленькие экраны:

Примеры

/* Создайте четыре равных столбца, которые плавают рядом друг с другом */
.column {
 
float: left;
  width: 25%;
}

/* На экранах шириной 992 пикселя или меньше происходит переход от четырех столбцов к двум столбцам */
@media screen and (max-width: 992px) {
 
.column {
    width: 50%;
  }
}

/* На экранах шириной 600px или меньше столбцы должны располагаться друг над другом, а не рядом друг с другом. */
@media screen and (max-width: 600px) {
  .column {
    width:
100%;
  }
}

Попробуйте сами »

Совет: Более современный способ создания макетов столбцов заключается в использовании CSS Flexbox (см. Пример ниже). Однако это не поддерживается в Internet Explorer 10 и более ранних версиях. Если вам требуется поддержка IE6-10, используйте float (как показано выше).

Чтобы узнать больше о модуле Flexible Box Layout, прочитайте раздел CSS Flexbox.

Чтобы узнать больше об адаптивном веб-дизайне, прочтите Учебник по адаптивному веб-дизайну на нашем сайте W3Schools на русском.

Пример

/* Контейнер для флексбоксов */
.row {
  display: flex;
 
flex-wrap: wrap;
}

/* Создайте четыре равных столбца */
.column {
  flex: 25%;
 
padding: 20px;
}

/* На экранах шириной 992 пикселя или меньше переходите от четырех столбцов к двум столбцам */
@media screen and (max-width: 992px) {
 
.column {
    flex: 50%;
  }
}

/* На экранах шириной 600px или меньше столбцы должны располагаться друг над другом, а не рядом друг с другом. */
@media screen and (max-width: 600px) {
  .row {
   
flex-direction: column;
  }
}

Попробуйте сами »

Скрыть элементы с помощью медиа-запросов

Другое распространенное использование медиа-запросов — скрытие элементов на экранах разных размеров:

Я буду спрятан на маленьких экранах.

Пример

/* Если размер экрана составляет 600 пикселей в ширину или меньше, скрыть элемент */
@media
screen and (max-width: 600px) {
  div.example {
   
display: none;
  }
}

Попробуйте сами »

Изменить размер шрифта с помощью медиазапросов

Вы также можете использовать медиа-запросы для изменения размера шрифта элемента на экранах разных размеров:

Пример

/* Если размер экрана превышает 600 пикселей, установите размер шрифта в на 80px */
@media screen and (min-width:
600px) {
  div.example {
   
font-size: 80px;
  }
}

/* Если размер экрана составляет 600 пикселей в ширину или меньше, установите размер шрифта в <div> на 30px */
@media screen and (max-width: 600px) {
  div.example {
   
font-size: 30px;
  }
}

Попробуйте сами »

Гибкая галерея изображений

В этом примере мы используем медиазапросы вместе с flexbox для создания адаптивной галереи изображений:

Гибкий веб-сайт

В этом примере мы используем медиа-запросы вместе с flexbox для создания адаптивного веб-сайта, содержащего гибкую панель навигации и гибкий контент.

Ориентация: Портретная (вертикальная) / Альбомная (горизонтальная)

Медиа-запросы также можно использовать для изменения макета страницы в зависимости от ориентации браузера.

У вас может быть набор свойств CSS, которые будут применяться только тогда, когда окно браузера шире его высоты, так называемая «landscape» («альбомная») ориентация:

Пример

Используйте светло-голубой цвет фона, если ориентация в альбомном режиме:

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

Попробуйте сами »

От минимальной ширины до максимальной ширины

Вы также можете использовать (max-width: ..) and (min-width: ..) значения для установки минимальной ширины и максимальной ширины.

Например, когда ширина браузера составляет от 600 до 900 пикселей, измените внешний вид элемента <div>:

Пример

@media screen and (max-width: 900px) and (min-width: 600px) {
  div.example {
   
font-size: 50px;
    padding: 50px;
   
border: 8px solid black;
    background: yellow;
  }
}

Попробуйте сами »

Используя дополнительное значение: В приведенном ниже примере мы добавляем дополнительный медиа-запрос к нашему уже существующему, используя запятую (это будет вести себя как оператор OR — или):

Пример

/* Если ширина между 600px и 900px OR (или) больше 1100px — изменить внешний вид <div> */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width:
1100px) {
  div.example {
   
font-size: 50px;
    padding: 50px;
   
border: 8px solid black;
    background: yellow;
  }
}

Попробуйте сами »

CSS Справочник @media

Чтобы получить полный обзор всех типов мультимедиа и функций / выражений, ознакомьтесь с @media правилами в CSS справочнике.

Совет: Чтобы узнать больше об адаптивном веб-дизайне (как настроить таргетинг на разные устройства и экраны), используя брэкпоинты медиа-запросов, прочитайте Учебник по адаптивному веб-дизайну на нашем сайте W3Schools на русском.

точки останова, типы устройств, стандартные разрешения и многое другое

В прошлом создание веб-сайта было более простой задачей. На сегодняшний день макет веб-сайта должен адаптироваться не только к компьютерам, но и к планшетам, мобильным устройствам и даже телевизорам.

Создание веб-сайта с адаптируемым макетом называется отзывчивым веб-дизайном, а медиа-запросы CSS — одни из важнейших его частей. В этой статье мы подробно рассмотрим медиа-запросы и способы их использования в CSS.

Медиа-запрос — это функция CSS3, которая используется для адаптации макета веб-страницы к различным размерам экрана и типам устройств.

Синтаксис

@media media type and (condition: breakpoint) {
  // Правила CSS
}

Мы можем ориентироваться на различные типы устройств в зависимости от условий. Правила внутри медиа-запроса применяются только при совпадении условий and/or в типах устройств.

Синтаксис может показаться сложным, поэтому давайте рассмотрим каждую его часть по отдельности.

Правило @Media

Начнем определение медиа-запросов с правила @media, а затем включим правила CSS в круглые скобки. Оно используется для указания типов целевых устройств:

@media () {
  // Правила CSS
}

Скобка

Внутри скобки мы устанавливаем условие. Например, нам нужно увеличить размер шрифта для мобильных устройств. Для этого устанавливаем максимальную ширину, которая проверяет ширину устройства:

.text {
  font-size: 14px;
}

@media (max-width: 480px) {
  .text {
    font-size: 16px;
  }
}

Обычно размер текста составляет 14 пикселей. Однако, поскольку мы применили медиа-запрос, он изменится до 16 пикселей при максимальной ширине устройства 480 пикселей и меньше.

Важно: медиа-запросы всегда должны находиться в конце CSS-файла.

Типы устройств

Типы устройств размещаются сразу после правила @media. Если тип не указан, правило @media выбирает все типы по умолчанию. Существует множество видов устройств, однако их можно разделить на 4 категории:

• all — для всех типов устройств;
• print — для принтеров;
• screen — для экранов компьютеров, планшетов и смартфонов;
• speech — для скринридеров, которые «читают» страницу вслух.

Например, чтобы выбрать только экраны, нужно установить ключевое слово screen сразу после правила @media. Правила также необходимо объединить ключевым словом «and»:

@media screen and (max-width: 480px) {
  .text {
    font-size: 16px;
  }
}

Точки останова

Точка останова — это ключ, который определяет, когда следует изменить макет и адаптировать новые правила внутри медиа-запросов. Вернемся к нашему примеру:

@media (max-width: 480px) {
  .text {
    font-size: 16px;
  }
}

Здесь точка останова составляет 480 пикселей. Теперь медиа-запрос знает, когда устанавливать или перезаписывать новый класс. Если ширина устройства меньше 480 пикселей, то будет применен класс text.

Распространенные точки останова: есть ли стандартное разрешение?

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

Следовательно мы не можем сказать, что существует стандартное разрешение для устройств, однако в повседневном программировании есть несколько часто используемых вариантов. Если вы используете фреймворки CSS (например, Bootstrap, Bulma и т. д.), вы также можете применять их точки останова.

Рассмотрим некоторые распространенные точки останова:

• 320px — 480px: мобильные устройства;
• 481px — 768px: планшеты;
• 769px — 1024px: маленькие экраны, ноутбуки;
• 1025px — 1200px: большие экраны;
• 1201px и больше —  очень большие экраны, телевизоры.

Как уже было сказано выше, точки останова могут различаться и точно определенного стандарта нет, однако приведенные выше примеры используются чаще всего.

Заключение

Отзывчивость является обязательным параметром в современной области веб-дизайна и разработки, а медиа-запросы — одни из наиболее важных частей создания отзывчивых макетов. Я надеюсь, что эта статья помогла вам разобраться в том, как они работают.

Читайте также:

Перевод статьи Cem Eygi: CSS Media Queries: Breakpoints, Media Types, Standard Resolutions, and More

Примеры различных медиа-запросов CSS помимо max-width и min-width

От автора: недавно мы запустили новый веб-сайт нашей компании Mabiloft, с полностью переработанным чистым макетом и множеством новых великолепных иллюстраций и анимации. В то время как наш дизайнер проделал потрясающую работу, придумав и нарисовав сайт, сложной задачей для нас, разработчиков, было сделать так, чтобы макет оставался чистым и функциональным для каждого устройства, от большого 2К-экрана, до старого iPhone 4 с его 3,5-дюймовым экраном.

Несколько недель назад веб-сайт был почти готов, и я просматривал разные страницы, чтобы убедиться, что все было так, как задумано. Я заметил, что макет на главной странице ломается на iPad. Я быстро изменил некоторые CSS-правила и исправил их, но… после этого макет сломался на ноутбуке с маленьким дисплеем.

В поисках решения я обнаружил, что могу сделать оба макета идеальными, используя только медиа-запросы CSS, не касаясь кода JavaScript. Фактически, до этого я в основном использовал медиа-запросы CSS для создания адаптивного макета, но только с max-width и min-width.

Теперь я обнаружил, что медиа-запросы CSS — это не только max-width, их множество. И некоторые из них могут быть действительно полезны в повседневной работе.

Итак, что это за полезные медиа-запросы, о которых я говорю? Возможно, вы слышали о некоторых из них. Я также выбрал несколько новинок, которые могут пригодиться, если вы хотите, чтобы на вашем сайте были маленькие детали, которые имеют значение.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Да, я говорю о width, height, min-width, min-height, max-width и max-height. Нужно ли их вам представлять? Попробую сделать это вкратце. Эти функции используются для установки разных стилей для разных размеров экрана. Они очень полезны для построения адаптивной системы.

Поскольку функции width и height могут устанавливать стили только для точного размера области просмотра, более вероятно, что вы будете использовать префиксы max и min. Например, этот код будет применять стили, если высота области просмотра превышает 320 пикселей.

body {
background-color: #FFD23F; /* Yellow */
}

@media screen and (min-height: 320px) {
body {
background-color: #EE4266; /* Red */
}
}

Красный фон будет применяться только в том случае, если высота области просмотра превышает 320 пикселей.

Но вы также можете смешать эти функции для обработки диапазона размеров.

body {
background-color: #FFD23F; /* Yellow */
}

@media screen and (min-width: 320px) and (max-width: 600px) {
body {
background-color: #EE4266; /* Red */
}
}

Красный фон будет применяться, если ширина области просмотра составляет от 320 до 600 пикселей.

В следующем примере показано, как можно использовать функцию min-width для изменения цвета фона в зависимости от ширины области просмотра.

body {
background-color: #0EAD69;
}

@media screen and (max-width: 1600px) {
body {
background-color: #3BCEAC;
}
}

@media screen and (max-width: 1280px) {
body {
background-color: #FFD23F;
}
}

@media screen and (max-width: 960px) {
body {
background-color: #EE4266;
}
}

@media screen and (max-width: 600px) {
body {
background-color: #540D6E;
}
}

Ориентация

Orientation — это полезная медиа-функция, которая позволяет вносить изменения в зависимости от ориентации экрана. Может иметь два значения: portrait и landscape.

Но что браузер считает portrait и что landscape? Значение portrait будет вызывать изменения каждый раз, когда высота области просмотра больше ширины. Аналогично, если ширина больше, чем высота, область просмотра будет landscape. Например, этот код дает следующий результат:

body {
background-color: #FFD23F; /* Yellow */
}

@media screen and (orientation: landscape) {
body {
background-color: #EE4266; /* Red */
}
}

Красный фон будет применяться, если ориентация области просмотра является альбомной.

Соотношение сторон

Это похоже на функцию ориентации, но более точно. Вы можете установить правила для точного соотношения сторон, которое вам нужно. Например, вы можете установить различные правила соотношения сторон для телефонов 16/9 и новых телефонов 18/9. Эта функция может также иметь префикс max- и min- для обработки ряда форматов изображения.

hover и pointer

Хорошо, я постараюсь объяснить эти медиа-функции как можно проще, так как они полезны. И hover, и pointer относятся к первичным механизмам входа сайта. Мышь, например. Или палец, если вы используете смартфон для навигации по сайту. Чтобы указать все механизмы ввода, вы можете использовать функции any-hover и any-pointer.

Теперь, что они практически делают? Функции hover (и any-hover) позволяют браузеру узнать, может ли основной механизм ввода наводиться на элементы. Вы можете использовать это следующим образом:

hover: hover, если основной механизм ввода может наводиться;

hover: none, если первичный механизм ввода не может наводиться на элементы или первичный механизм ввода с наведением отсутствует.

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

Функции pointer (и any-pointer) позволяют браузеру узнать, имеет ли основной механизм ввода указательное устройство (например, мышь), и насколько он точен. Вы можете использовать это следующим образом:

pointer: coarse, если основной механизм ввода содержит указательное устройство ограниченной точности;

pointer: fine, если основной механизм ввода содержит точное указательное устройство;

pointer: none, если основной механизм ввода не содержит указательного устройства.

Это полезно, например, для расширения области клика на устройствах с неточным указательным устройством.

Эй, это все скучные вещи, где новая классная функция, о которой ты говорил?

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

inverted-colors

Функция inverted-colors полезна, если вам нужно применить некоторые стили, когда системные цвета инвертированы.
Для чего мне инвертировать системные цвета? Обычно это очень полезно, если вам нужно улучшить читаемость.

Также имейте в виду, что при инвертировании цветов рекомендуется увеличивать размер шрифта и уменьшать толщину шрифта. Это отличная вещь, которую вы можете сделать с помощью этой медиа-функции!

У нее есть только пара значений:

inverted: применять стили, если цвета инвертированы;

none: применять стили по умолчанию.

Вот пример! Когда цвета инвертированы, размер текста будет увеличиваться.

.text {
font-size: 24px;
}

@media screen and (inverted-colors: inverted) {
.text {
font-size: 36px;
}
}

Обратите внимание, что в данный момент эта функция поддерживается только в Safari (как на MacOS, так и на iOS). Постоянно обновляемый список поддерживаемых браузеров можно найти здесь.

prefers-color-scheme

Это одна из моих любимых функций, и я надеюсь, что она постепенно станет популярной. Она позволяет разработчикам устанавливать различные стили для элементов в случае изменения цветовой схемы. И Windows, и MacOS позволяют пользователям менять системную тему со светлой на темную и наоборот, iOS 13 также представила эту функцию, а Android Q сделает это вскоре.

Поддержка браузерами также приличная. На данный момент последние версии Google Chrome, Mozilla Firefox и Safari поддерживают эту функцию. На мобильных устройствах ее поддерживают также все основные браузеры, кроме Opera. Постоянно обновляемый список поддерживающих браузеров можно найти здесь.

Значения этой функции довольно интуитивны:

light: применять стили, если пользователь предпочитает светлую тему;

dark: применять стили, если пользователь предпочитает темную тему;

no-preference: применять стили по умолчанию.

Посмотрите, как круто эта функция работает в примере ниже!

.appbar {
background-color: #EE4266;
}

.fab {
background-color: #424242;
}

@media screen and (prefers-color-scheme: dark) {

body {
background-color: #424242;
}

.appbar {
background-color: #212121;
}

h3 {
color: #fff;
}

.fab {
background-color: #EE4266;
}

}

Установка темной темы системы делает страницу также темной!

prefers-reduced-motion

Это тоже очень важная функция. Мне лично нравятся анимация и переходы, и я думаю, что правильная анимация действительно может изменить пользовательский опыт. Но анимации нравится не всем, и, самое главное, некоторые люди могут страдать вестибулярными расстройствами, которые вызывают укачивание и головокружение. Я нашел полезную статью, которая очень хорошо это объясняет.

Таким образом, в основных настольных и мобильных ОС есть опция доступности, чтобы справиться с этим беспорядком, уменьшая движение системы. prefers-reduced-motion обрабатывает эту опцию.

Данная функция может принимать два значения:

reduce: применить стили, если пользователь не хочет видеть анимацию и переходы. Обычно используется для их отключения;

no-preference: чтобы применить стандартные стили.

Посмотрите пример ниже:

.pulse {
animation: pulse 2s infinite;
}

@media screen and (prefers-reduced-motion: reduce) {
.pulse {
animation: none;
}
}

Анимация пульсации останавливается, в зависимости от настроек пользователя.

Совместимость браузеров достаточно хороша. На данный момент только Edge и IE не имеют поддержки. С постоянно обновляемой таблицей совместимости можно ознакомиться здесь.

Заключение

Для меня это был забавный эксперимент, я изучил некоторые новые функции, которые, вероятно, буду использовать гораздо чаще.

Я хотел бы рассмотреть еще несколько примеров, таких как функция light-level, которую можно использовать для проверки уровня внешней освещенности, но большинство недавно представленных медиа-функций по-прежнему не имеют поддержки браузеров, так что… еще не время. Кстати, полный список функций можно найти здесь.

Примеры кода

Вы можете увидеть онлайн-примеры здесь. Источник с открытым исходным кодом на Github, так что вы можете посмотреть его!

Автор: Francesco Baldan

Источник: //medium.com

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Фреймворк Bootstrap 5. Быстрый старт

Изучите основы Bootstrap 5 на практическом примере по верстке интернет-магазина с нуля!

Смотреть

Почему порядок media запросов имеет значение в CSS?

В последнее время я разрабатываю сайты, которые более отзывчивы, и часто использую CSS media запросов. Один из паттернов, который я заметил, заключается в том, что порядок, в котором определяются запросы media, действительно имеет значение. Я тестировал его не в каждом браузере, а только в Chrome. Есть ли объяснение такому поведению? Иногда это расстраивает, когда ваш сайт работает не так, как должен, и вы не уверены, что это запрос или порядок, в котором он написан.

Вот пример:

HTML

<body>
    <div><h2>Welcome to my website</h2></div>
    <div><a href="#">Contact us</a></div>
</body>

CSS:

body{
font-size:1em; /* 16px */
}

.two{margin-top:2em;}



/* Media Queries */

@media (max-width: 480px) {
    .body{font-size: 0.938em;}

}
/* iphone */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    body {font-size: 0.938em;}
}
/*if greater than 1280x800*/
@media (min-width: 1200px) {
       .two{margin-top:8em;}
            }
/*1024x600*/
@media (max-height: 600px) {
       .two{margin-top:4em;}
}
/*1920x1024*/
@media (min-height: 1020px) {
       .two{margin-top:9em;}
}
/*1366x768*/
@media (min-height: 750px) and (max-height: 770px) {
       .two{margin-top:7em;}
}

Однако если бы я написал запрос на 1024×600 в последнем, браузер проигнорировал бы его и применил значение маржи, указанное в начале CSS (margin-top:2em).

/* Media Queries - Re-arranged version */

@media (max-width: 480px) {
    .body{font-size: 0.938em;}
}
/* iphone */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    body {font-size: 0.938em;}
}
/*if greater than 1280x800*/
@media (min-width: 1200px) {
       .two{margin-top:8em;}
}
/*1920x1024*/
@media (min-height: 1020px) {
       .two{margin-top:9em;}
}
/*1366x768*/
@media (min-height: 750px) and (max-height: 770px) {
       .two{margin-top:7em;}
}
 /*1024x600*/
@media (max-height: 600px) {
       .two{margin-top:4em;}
}

Если мое понимание media запросов верно, порядок не должен иметь значения, но, похоже, это так. В чем может быть причина?

css

media-queries

responsive-design

Поделиться

Источник

dsignr    

09 января 2012 в 14:56

2 ответа

• Media запросов-имеет ли значение, если в файле css или html?

  Я хочу использовать media запросов, чтобы изменить свой дизайн для телефонов и других мобильных устройств. Похоже, что в моем файле css может быть либо следующее: @media handheld and (max-width: 480px), screen and (max-device-width: 480px) { } Или я могу иметь что-то подобное как часть ссылки на…

• CSS media порядок запроса

  У меня есть вопрос о CSS media запросах. Мой вопрос заключается в том, будет ли порядок моих запросов css media иметь значение. Например: <link rel=stylesheet href=desktop.css media=> <link rel=stylesheet href=laptop.css media=> <link rel=stylesheet href=mobile.css media=>…

141

Это по дизайну CSS — Каскадной таблицы стилей.

Это означает, что если вы примените два правила, которые сталкиваются с одними и теми же элементами, он выберет последнее , которое было объявлено, если только первое не имеет маркера !important или не является более конкретным (например, html > body против просто body, последнее менее конкретное).

Итак, учитывая это CSS

@media (max-width: 600px) {
  body {
    background: red;
  }
}

@media (max-width: 400px) {
  body {
    background: blue;
  }
}

если окно браузера имеет ширину 350 пикселей, фон будет синим, в то время как с этим CSS

@media (max-width: 400px) {
  body {
    background: blue;
  }
}

@media (max-width: 600px) {
  body {
    background: red;
  }
}

и той же ширины окна, фон будет красным. Оба правила действительно совпадают, но второе-это то, которое применяется, потому что это последнее правило.

Наконец, с

@media (max-width: 400px) {
  body {
    background: blue !important;
  }
}

@media (max-width: 600px) {
  body {
    background: red;
  }
}

или

@media (max-width: 400px) {
  html > body {
    background: blue;
  }
}

@media (max-width: 600px) {
  body {
    background: red;
  }
}

фон будет синим (с окном шириной 350 пикселей).

Поделиться

Alessandro Vendruscolo    

09 января 2012 в 16:58

20

Или вы можете просто добавить минимальную ширину к большему запросу media и не иметь никаких проблем, независимо от порядка.

@media (min-width: 400.1px) and (max-width: 600px) {
  body {
    background: red;
  }
}

@media (max-width: 400px) {
  body {
    background: blue;
  }
}

Используя этот код, в любом порядке цвет фона всегда будет красным для разрешений шириной 400.1px-600 пикселей и всегда будет синим для разрешений шириной 400 пикселей или меньше.

Поделиться

Liran H    

06 ноября 2014 в 15:58

Похожие вопросы:

Sass media запросов скомпилировано css

Я начал использовать Sass, взял свой старый код css и работал с ним. Для компиляции я использовал prepros, который имеет возможность сжимать CSS, что экономит некоторое пространство. Проблема у меня…

Переопределение CSS media запросов

Я каждый день работаю со страницей, которая использует CSS media запросов, которые мне не нравятся; я бы предпочел использовать полную страницу (большинство из них связано с тем, что меню начальной…

CSS media размещение запросов

Для каждого проекта мои media-запросы единообразно следуют основным стилям CSS, так как: /* CSS styles */ /* CSS styles */ /* CSS styles */ /* Media queries */ /* Media queries */ /* Media queries…

Media запросов-имеет ли значение, если в файле css или html?

Я хочу использовать media запросов, чтобы изменить свой дизайн для телефонов и других мобильных устройств. Похоже, что в моем файле css может быть либо следующее: @media handheld and (max-width:…

CSS media порядок запроса

У меня есть вопрос о CSS media запросах. Мой вопрос заключается в том, будет ли порядок моих запросов css media иметь значение. Например: <link rel=stylesheet href=desktop.css media=> <link…

CSS media запросов-путать перекрытие и порядок

У меня возникли некоторые проблемы с моими запросами media. Создаю сайт, используя купленную отзывчивую тему wordpress, и сейчас настраиваю ее. Я столкнулся с проблемой, когда из-за того, как дизайн…

Почему media запросов имеет меньший приоритет, чем нет media запросов css

Я хочу знать, почему запросы media имеют меньший приоритет, чем обычные css? Как обойти эту проблему, чтобы сделать запросы media более важными? @media screen and (min-width: 100px) and (max-width:…

Использование неопределенных запросов CSS media

Я исследовал около CSS media запросов лучших практик и нашел определение Фонда . Как вы можете видеть, первый запрос media не имеет определения min/max-size: @media только экран { } /* определение…

узел-sass, media запросов и каскадирование

Из-за моего Смутного понимания инструментов, которые я использую, я не смог определить источник проблемы. node-sass не обеспечивает агрегацию media-запросов, но css-mqpacker это делает, вот где мне…

authorizeRequests() порядок имеет значение?

Я изучаю Spring и хочу знать, почему существует разница, когда я меняю порядок этих двух методов authorizeRequests(): Это прекрасно работает: security.authorizeRequests() .antMatchers(/css/**)…

Media запросов + масштабирование браузера

Я столкнулся с очень странной проблемой, когда дело доходит до media запросов и масштабирования браузера.

Я использую Chrome 52.0.2743.116 m.

Проблема вот в чем:

Когда вы увеличиваете масштаб с помощью браузера zoom to 125% и изменяете размер браузера до тех пор, пока планшет не начнет работать (max-width: 1024px), кажется, что есть момент, когда ни max-width: 1024px, ни min-width: 1025px не являются истинными.

Если я изменю его на max-width: 1024.9px-он работает.

Вот краткий пример:

<div>
   Text
</div>
<div>
   Text
</div>
<div>
   Text
</div>

И CSS:

@media (max-width:768px) {
    .box {
        background: blue;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .box {
        background: red;
    }
}

@media (min-width:1025px) {
    .box {
        background: green;
    }
}

Пример: http://codepen.io/tomusborne/pen/EyrNvG

Увеличьте масштаб 125%,, а затем уменьшите размер до тех пор, пока он не станет красным. Измените размер пикселя за пикселем, и вы заметите, что на один пиксель между планшетом и рабочим столом нет никакого цвета фона.

Кто-нибудь знает, что здесь происходит? Является ли использование 1024.9px достойным решением? Неужели я просто схожу с ума?

css

media-queries

Поделиться

Источник

Tom Usborne    

16 августа 2016 в 17:33

2 ответа

• CSS Media запросов при изменении размера браузера?

  Я думаю, что CSS media запросов не работает, так как пользователь изменяет размер браузера? Пользователь должен будет обновить страницу, чтобы запрос media вступил в силу? Как я могу обновить запрос media, возможно, с помощью JS? в настоящее время я использую JS для определения размера окна при…

• Media запросов для различных уровней масштабирования браузера

  Я новичок в адаптивном дизайне с использованием CSS3 media запросов. Я ясно понимаю, как мы ориентируемся на разные устройства, используя эти запросы media, но место, где я запутался, — это масштабирование браузера!!. Например : это мое нормальное тело css правило #body { margin: 0 auto; width:…

2

Проверка элемента <html> содержит ответ:

Таким образом, ширина страницы на самом деле больше 1024 пикселей и меньше 1025 пикселей.

Я предлагаю использовать одинаковые значения как для min-width , так и для max-width .

Это охватывает все ширины, без пробелов, и если есть столкновение (т. Е. Страница имеет ширину ровно 1024 пикселей), то какое бы правило ни появилось позже в документе, оно должно иметь приоритет.

Поделиться

Siguza    

16 августа 2016 в 17:46

0

Вам не нужно использовать min или max. если вы хотите применить любой css для любой фиксированной ширины, вы можете использовать запрос media, как показано ниже…
@media только экран и (ширина : 1024px) {
/* Your Styles */
}

Поделиться

Amit Srivastava    

27 июля 2017 в 10:16

Похожие вопросы:

Как масштабирование страницы связано с media-запросами?

Как масштабирование страницы связано с media-запросами ? @media only screen and (min-width: 500px) { body { background-color: blue; } } @media only screen and (min-width: 800px) { body {…

@Media запросов для настольного браузера IE9

У меня возникли проблемы с @media запросами для рабочего стола IE9. Я создал сайт, который, когда кто-то изменяет размер своего браузера вниз, весь макет меняется в зависимости от размера screen….

Как настроить размер фонового изображения в окне браузера с помощью media запросов

У меня есть фоновое изображение на моем сайте. Я хочу, чтобы изменить размер моего окна браузера фоновое изображение с помощью запросов media. Я новичок в концепции media запросов, не могли бы вы…

CSS Media запросов при изменении размера браузера?

Я думаю, что CSS media запросов не работает, так как пользователь изменяет размер браузера? Пользователь должен будет обновить страницу, чтобы запрос media вступил в силу? Как я могу обновить запрос…

Media запросов для различных уровней масштабирования браузера

Я новичок в адаптивном дизайне с использованием CSS3 media запросов. Я ясно понимаю, как мы ориентируемся на разные устройства, используя эти запросы media, но место, где я запутался, — это…

принудительное масштабирование браузера условно

Мне нужен div размером 768×900 пикселей, чтобы он был полностью виден в окне браузера. Если окно браузера слишком мало и/или слишком увеличено, часть div В настоящее время усекается. То, что я хочу,…

Media проблемы с изменением размера браузера запросов

Я применяю media запроса к своему проекту , но когда я изменяю размер браузера , он не работает. Но когда я изменяю его размер из инструмента разработчика (inspect element), он works…It звучит…

Хорошо ли иметь несколько запросов media в CSS, и из-за этого рендеринг браузера будет затронут?

Таким образом, мой вопрос связан с media запросами. Я хочу знать, что использование нескольких запросов media повлияет на скорость рендеринга браузера или можно использовать любое количество…

Пропорциональное масштабирование страницы (включая media запросов)

Я хочу иметь возможность программно масштабировать страницу вверх или вниз, и самое сложное заключается в том, что я хочу, чтобы запросы media масштабировались с той же скоростью. Таким образом,…

Media выпуск запросов

Я хочу показать свою веб-страницу на мобильных устройствах, похожих на настольную версию, что я и сделал. Здесь я не добавлял тег viewport на свою страницу. Я пытаюсь увеличить только размер шрифта…

Медиа-запросы CSS3 | CSS

Медиа-запросы разделяются в зависимости от пользовательского устройства, и в настоящее время поддерживаются два типа запросов — «screen» и «print«. Медиа-запросы обеспечивают расширяемость функционала сайтов и веб-приложений, позволяя задавать более четкое определение стилей.

Медиа-запрос — это способ контролировать представление контента. Он состоит из типа и минимум одного выражения, которое проверяет выполнение условий для указанных характеристик устройства.

Как уже было сказано, в настоящее время широко реализована поддержка двух типов: «screen» и «print«.

При наличии условных выражений контент может выводиться по-разному для различных типов устройств, без ущерба для содержимого.

Простой медиа-запрос может быть определен в HTML следующим образом:

<link rel="stylesheet" media="print" href="myexample.css" />

В приведенном выше примере, мы указали, что для типа медиа «print» браузер пользователя должен использовать таблицу стилей myexample.css.

То же самое может быть объявлено как @import-правило в CSS:

@import url(myexample.css) print;

Когда браузер пользователя обрабатывает приведенный выше медиа-запрос, он определяет, текущий тип медиа — print или нет. Если да, то будет применяться таблица стилей «myexample.css«. Следовательно, вывод медиа-запросов можно организовать в зависимости от выполняемых условий.

Если тип устройств не задан или задано значение ‘all‘, то стили будут применяться для всех типов медиа.

Например:

<link rel="stylesheet" href="myexample.css" />
<link rel="stylesheet" media="all" href="myexample.css" />

В приведенном выше примере, стили будет применяться как для типа ‘print‘, так и для типа ‘screen‘. Это эквивалентные объявления. Как и следующий CSS-код:

@media all { … }
@media { … }

Медиа-запросы могут быть объединены в сложные медиа-запросы:

<link rel="stylesheet" media="print, projection" href="myexample.css" />

Этот запрос также может быть объявлен следующим образом:

@media print, projection { … }

Медиа-запросы также поддерживают логическое выражение NOT, используя ключевое слово «NOT«:

<link rel="stylesheet" media="not print, screen" href="myexample.css" />

В приведенном выше примере мы указали, что стили не будут применяться к типу ‘print‘, а только к типу ‘screen‘.

• color;
• color-index;
• device-aspect-ratio;
• device-height;
• device-width;
• grid;
• height;
• monochrome;
• resolution;
• scan;
• width.

Из этой статьи вы узнали о медиа-запросах CSS3. Я надеюсь, что вы нашли эту информацию полезной для себя.

Данная публикация является переводом статьи «Understanding CSS3 Media Queries» , подготовленная редакцией проекта.

медиа-запросов CSS

Введенные типы носителей CSS2

Правило @media , введенное в CSS2, позволило определить разные правила стиля для разных типов мультимедиа.

Примеры: у вас может быть один набор правил стиля для экранов компьютеров, один для
принтеры, один для портативных устройств, один для телевизионных устройств и т. д.

К сожалению, эти типы носителей никогда не получали большой поддержки со стороны устройств, другие
чем тип печатного носителя.

CSS3 Представленные медиа-запросы

Медиа-запросы в CSS3 расширили идею CSS2 типов мультимедиа: вместо поиска типа устройства,
они смотрят на возможности
устройство.

Медиа-запросы могут использоваться для проверки многих вещей, например:

• ширина и высота области просмотра
• ширина и высота устройства

Ориентация

• (в альбомной или книжной ориентации планшет / телефон?)
• разрешение

Использование медиа-запросов — популярный метод предоставления индивидуального стиля
лист на настольные компьютеры, ноутбуки, планшеты и мобильные телефоны (например, iPhone и телефоны Android).

Поддержка браузера

Числа в таблице указывают первую версию браузера, полностью поддерживающую правило @media .

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

Медиа-запрос состоит из медиа-типа и может содержать один или несколько
выражения, которые принимают значение true или false.

@media not | только mediatype и ( выражений ) {
CSS-Code;
}

Результат запроса:
истина, если указанный тип носителя соответствует типу устройства, на котором находится документ
отображается, и все выражения в медиа-запросе верны. Когда медиа-запрос верен, соответствующая таблица стилей или правила стилей
применяется, следуя обычным правилам каскадирования.

Если вы не используете операторы not или only, тип носителя является необязательным, а
будут подразумеваться все типы .

У вас также могут быть разные таблицы стилей для разных носителей:

mediatype и | не | только ( выражений )»
href = « print.css «>

Типы носителей CSS3

Медиа-запросы Простые примеры

Один из способов использования медиа-запросов — иметь альтернативный раздел CSS прямо внутри таблицы стилей.

В следующем примере цвет фона меняется на светло-зеленый, если
область просмотра имеет ширину 480 пикселей или шире (если область просмотра меньше
480 пикселей, цвет фона будет розовый):

Пример

@media screen и (min-width: 480px) {
body {
background-color: lightgreen;
}
}

Попробуй сам »

В следующем примере показано меню, которое будет перемещаться слева от страницы, если
область просмотра имеет ширину 480 пикселей или шире (если область просмотра меньше
480 пикселей, меню будет поверх содержимого):

Пример

экран @media и (min-width: 480 пикселей) {
#leftsidebar
{ширина: 200 пикселей; float: left;}
#main
{margin-left: 216px;}
}

Попробуй сам »

Дополнительные примеры медиа-запросов

Чтобы увидеть больше примеров по медиа-запросам, перейдите на следующую страницу: Примеры CSS MQ.

CSS @media Ссылка

Для полного обзора всех типов и функций / выражений медиа, пожалуйста, посмотрите
Правило @media в нашем справочнике CSS.

Программное тестирование медиа-запросов — CSS: каскадные таблицы стилей

DOM предоставляет функции, которые могут тестировать результаты медиа-запроса программно через интерфейс MediaQueryList , его методы и свойства. Создав объект MediaQueryList , вы можете проверить результат запроса или получать уведомления при изменении результата.

Прежде чем вы сможете оценить результаты медиа-запроса, вам необходимо создать объект MediaQueryList , представляющий запрос. Для этого используйте метод window.matchMedia .

Например, чтобы настроить список запросов, который определяет, находится ли устройство в альбомной или книжной ориентации:

  const mediaQueryList = window.matchMedia ("(ориентация: портрет)");
  

Создав список медиа-запросов, вы можете проверить результат запроса, посмотрев значение его свойства соответствует :

  если (mediaQueryList.Матчи) {
  
} еще {
  
}
  

Если вам необходимо постоянно быть в курсе изменений оцениваемого результата запроса, более эффективно зарегистрировать прослушиватель, чем опрашивать результат запроса. Для этого вызовите метод addListener () для объекта MediaQueryList с функцией обратного вызова, вызываемой при изменении статуса медиа-запроса (например, тест медиа-запроса изменяется с true на false ):

 
const mediaQueryList = окно.matchMedia ("(ориентация: портрет)");


function handleOrientationChange (mql) {
  
}


handleOrientationChange (mediaQueryList);


mediaQueryList.addEventListener ('изменить', handleOrientationChange);
  

Этот код создает список медиа-запросов для тестирования ориентации, а затем добавляет к нему прослушиватель событий. После определения слушателя мы также вызываем слушателя напрямую. Это заставляет нашего слушателя выполнять настройки в зависимости от текущей ориентации устройства; в противном случае наш код может предположить, что устройство находится в портретном режиме при запуске, даже если оно на самом деле находится в альбомном режиме.

Функция handleOrientationChange () будет смотреть на результат запроса и обрабатывать все, что нам нужно сделать при изменении ориентации:

  function handleOrientationChange (evt) {
  if (evt.matches) {
    
  } еще {
    
  }
}
  

Выше мы определяем параметр как evt — объект события. Это имеет смысл, потому что более новые реализации MediaQueryList обрабатывают прослушиватели событий стандартным образом. Они больше не используют необычный механизм MediaQueryListListener , а стандартную настройку прослушивателя событий, передавая объект события типа MediaQueryListEvent в качестве аргумента функции обратного вызова.

Этот объект события также включает в себя media и соответствует свойствам , поэтому вы можете запросить эти функции MediaQueryList , напрямую обращаясь к нему или обращаясь к объекту события.

Чтобы перестать получать уведомления об изменениях значения вашего медиа-запроса, вызовите removeListener () на MediaQueryList , передав ему имя ранее определенной функции обратного вызова:

  mediaQueryList.removeListener (handleOrientationChange);
  

Интерфейс MediaQueryList

Таблицы BCD загружаются только в браузере

Общие сведения о медиа-запросах CSS3

Медиа-запросы

CSS позволяют форматировать документы для правильного отображения на устройствах вывода разного размера.

Медиа-запросы позволяют настраивать представление веб-страниц для определенного диапазона устройств, таких как мобильные телефоны, планшеты, настольные компьютеры и т. Д.без изменения наценок. Медиа-запрос состоит из типа мультимедиа и нуля или более выражений, которые соответствуют типу и условиям конкретных мультимедийных функций, таких как ширина устройства или разрешение экрана.

Поскольку медиа-запрос является логическим выражением, его можно разрешить как истинное, так и ложное. Результат запроса будет истинным, если тип мультимедиа, указанный в мультимедийном запросе, соответствует типу устройства, на котором отображается документ, а также если все выражения в мультимедийном запросе удовлетворены.Когда медиа-запрос верен, соответствующая таблица стилей или правила стилей применяются к целевому устройству. Вот простой пример медиа-запроса для стандартных устройств.

  / * Смартфоны (книжная и альбомная ориентация) ---------- * /
@media screen и (min-width: 320px) и (max-width: 480px) {
    / * стили * /
}
/ * Смартфоны (портрет) ---------- * /
@media screen и (max-width: 320 пикселей) {
    / * стили * /
}
/ * Смартфоны (альбомная ориентация) ---------- * /
@media screen и (min-width: 321px) {
    / * стили * /
}
/ * Планшеты, iPad (книжная и альбомная ориентация) ---------- * /
@media screen и (min-width: 768px) и (max-width: 1024px) {
    / * стили * /
}
/ * Планшеты, iPad (портрет) ---------- * /
@media screen и (min-width: 768px) {
    / * стили * /
}
/ * Планшеты, iPad (альбомная ориентация) ---------- * /
@media screen и (min-width: 1024px) {
    / * стили * /
}
/ * Настольные компьютеры и ноутбуки ---------- * /
@media screen и (min-width: 1224px) {
    / * стили * /
}
/ * Большие экраны ---------- * /
@media screen и (min-width: 1824px) {
    / * стили * /
}  

Совет: Медиа-запросы — отличный способ создания адаптивных макетов.Используя медиа-запросы, вы можете настроить свой веб-сайт по-разному для пользователей, просматривающих на таких устройствах, как смартфоны или планшеты, без изменения фактического содержимого страницы.

Изменение ширины столбца в зависимости от размера экрана

Вы можете использовать медиа-запрос CSS для изменения ширины веб-страницы и связанных элементов, чтобы обеспечить наилучшее качество просмотра для пользователя на разных устройствах.

Следующие ниже правила стиля автоматически изменяют ширину элемента контейнера в зависимости от размера экрана или области просмотра.Например, если ширина области просмотра меньше 768 пикселей, она будет покрывать 100% ширины области просмотра, если она больше 768 пикселей, но меньше 1024 пикселей, она будет шириной 750 пикселей и так далее.

  .container {
    маржа: 0 авто;
    фон: # f2f2f2;
    размер коробки: рамка-рамка;
}
/ * Мобильные телефоны (портрет и пейзаж) ---------- * /
@media screen и (max-width: 767px) {
    .container {
        ширина: 100%;
        отступ: 0 10 пикселей;
    }
}
/ * Планшеты и iPad (книжная и альбомная ориентация) ---------- * /
@media screen и (min-width: 768px) и (max-width: 1023px) {
    .container {
        ширина: 750 пикселей;
        отступ: 0 10 пикселей;
    }
}
/ * Настольные компьютеры и ноутбуки с низким разрешением ---------- * /
@media screen и (min-width: 1024px) {
    .container {
        ширина: 980 пикселей;
        отступ: 0 15 пикселей;
    }
}
/ * Настольные компьютеры и ноутбуки с высоким разрешением ---------- * /
@media screen и (min-width: 1280 пикселей) {
    .container {
        ширина: 1200 пикселей;
        отступ: 0 20 пикселей;
    }
}  

Примечание: Вы можете использовать свойство CSS3 box-sizing для элементов, чтобы создавать более интуитивно понятные и гибкие макеты с гораздо меньшими усилиями.

Изменение макетов в зависимости от размера экрана

Вы также можете использовать медиа-запрос CSS, чтобы сделать многоколоночный макет веб-сайта более адаптируемым и отзывчивым для устройств за счет небольшой настройки.

Следующее правило стиля создаст макет из двух столбцов, если размер области просмотра больше или равен 768 пикселей, но если меньше, он будет отображаться как макет с одним столбцом.

  .column {
    ширина: 48%;
    отступ: 0 15 пикселей;
    размер коробки: рамка-рамка;
    фон: # 93dcff;
    плыть налево;
}
.container .column: first-child {
    маржа-право: 4%;
}
@media screen и (max-width: 767px) {
    .столбец {
        ширина: 100%;
        отступ: 5 пикселей 20 пикселей;
        float: нет;
    }
    .container .column: first-child {
        маржа справа: 0;
        нижнее поле: 20 пикселей;
    }
}  

CSS Media Queries: Полное руководство

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

Найди свой матч на тренировочном лагере

• Карьера Карма подойдет вам с лучшими техническими учебными курсами
• Получите эксклюзивные стипендии и подготовительные курсы

Вот здесь и вступают в игру медиа-запросы. CSS-медиа-запросы позволяют применять правило CSS только тогда, когда браузер соответствует правилу, которое вы определили.Итак, вы можете определить правило, которое применяется только в том случае, если пользователь просматривает веб-страницу на смартфоне.

В этом руководстве с примерами обсуждаются основы адаптивного веб-дизайна, как работают медиа-запросы и как разрабатывать собственные медиа-запросы CSS. К концу чтения этого руководства вы станете экспертом в разработке медиа-запросов в CSS.

Адаптивный веб-дизайн и медиа-запросы

Адаптивный веб-дизайн — это набор методов, при которых разработчик оптимизирует таблицу стилей на сайте, чтобы сайт мог правильно отображаться на широком диапазоне различных устройств и размеров экрана.

Найди свой матч на тренировочном лагере

• Карьера Карма подойдет вам с лучшими техническими учебными курсами
• Получите эксклюзивные стипендии и подготовительные курсы

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

Хотя адаптивный веб-дизайн включает в себя широкий спектр приемов — от использования flexbox до относительных стилей — медиа-запросы являются важной частью любого веб-сайта, который разработан с учетом веб-отзывчивости.

Медиа-запросы позволяют настроить отображение стилей на веб-странице в зависимости от типа используемого устройства, ориентации устройства и размера области просмотра.

Используя медиа-запросы, вы можете по-разному отображать элементы на своем веб-сайте в зависимости от различных экранов и устройств, через которые пользователь просматривает ваш сайт.

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

Чтобы объявить медиа-запрос в CSS, необходимо использовать правило @media . Это правило позволяет выполнять блок свойств CSS только в том случае, если определенное условие истинно.

Вот основной синтаксис медиа-запроса CSS:

 @media media-type and (media-rule) {
// стили CSS
} 

Вот основные компоненты этого медиа-запроса:

• @media указывает браузеру создать медиа-запрос.
• media-type — это тип носителя, для которого будет использоваться код (например, экран или печать).

,

• , и — это логические операторы, которые нам необходимо использовать при указании как типа мультимедиа, так и правила мультимедиа.
• медиа-правило — это утверждение, которое должно быть истинным для выполнения CSS в медиа-запросе.
• Стили CSS — это правила, которые будут применяться к веб-элементу, если правило мультимедиа оценивается как истинное.

Существует четыре типа мультимедиа, которые можно использовать с мультимедийным запросом.Это все: печать, экран и речь. По умолчанию используется значение все , и можно указать несколько типов носителей, разделив каждый тип запятой.

Правила CSS для СМИ

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

Ширина и высота

Основными типами правил, используемых с медиа-правилами CSS, являются ширина и высота устройства. Эти правила позволяют нам применять стили к веб-элементу в зависимости от размера контейнера области просмотра.Термин контейнер области просмотра относится к области веб-страницы, видимой пользователю.

Правила ширины и высоты используются для применения стиля, если область просмотра точно равна определенному размеру. Итак, если вы хотите изменить цвет текста всех тегов

на веб-странице на синий, если высота области просмотра составляет 500 пикселей, вы можете сделать это, используя следующее правило:

 @media screen и (ширина: 500 пикселей) {
п {
цвет синий;
}
} 

Это правило устанавливает цвет текста всех тегов

на синий , если ширина области просмотра составляет точно 500 пикселей.

Однако в большинстве случаев вам может понадобиться применить медиа-запрос с использованием диапазонов. Так, например, вы можете изменить размер шрифта веб-страницы, если размер области просмотра равен или превышает 500 пикселей. Вот тут-то и пригодятся стили min-width и min-height.

Если бы мы хотели изменить цвет текста всех элементов

на синий, если ширина области просмотра больше 500 пикселей, мы могли бы использовать следующее правило:

 @media screen и (min-width: 500px) {
п {
цвет синий;
}
} 

Это правило устанавливает синий цвет текста всех элементов

, но только если ширина области просмотра равна или больше 500 пикселей.Этот медиа-запрос работает по условию min-width: 500px, которое проверяет, равна ли ширина области просмотра 500px или больше. Если это условие истинно, правила нашего стиля p применяются к веб-странице.

Ориентация

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

Предположим, мы хотим установить размер текста всех элементов h3 на 20 пикселей, если пользователь просматривает нашу веб-страницу в альбомном режиме.Мы могли бы сделать это с помощью этого кода:

 @media (ориентация: альбомная) {
h3 {
размер шрифта: 20 пикселей;
}
} 

Это правило проверяет, просматривает ли пользователь веб-страницу в альбомном режиме, и устанавливает размер шрифта всех элементов

на 20 пикселей, если это условие истинно.

По умолчанию настольные компьютеры используют альбомную ориентацию.

Примеры медиа-запросов CSS

Давайте рассмотрим два примера медиа-запросов, чтобы проиллюстрировать, как вы можете написать свои собственные медиа-запросы в CSS.

Пример простого медиа-запроса: скрыть элемент

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

Мы могли бы создать этот ящик, используя следующий код:

 

 Этот сайт находится на стадии бета-тестирования. 

  
<стиль>

.betaBox {
цвет фона: оранжевый;
отступ: 10 пикселей;
}
<стиль>
@media screen и (max-width: 600px) {
.betaBox {
дисплей: нет;
}
} 

Наш код возвращает:

Давайте разберемся с нашим кодом. В нашем HTML-файле мы определили тег

, который включает текст . Этот сайт находится на стадии бета-тестирования . Тегу

присвоен класс betaBox .

В нашем файле CSS мы указали два стиля. Стиль .betaBox устанавливает оранжевый цвет фона любого элемента с именем класса betaBox и создает пространство для заполнения 10 пикселей между содержимым элемента и его границами.

Следующее правило использует медиа-запрос. В нашем медиа-запросе max-width: 600px сообщает нашему браузеру, что правило стиля должно применяться только в том случае, если область просмотра уже 600 пикселей. Таким образом, если пользователь просматривает наш сайт на мобильном устройстве, этот стиль будет активирован.

Если наш медиа-запрос выполняется, правило display: none применяется к каждому элементу с именем класса .betaBox .

Пример нескольких медиа-запросов: размер шрифта

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

Предположим, мы разрабатываем веб-сайт и хотим, чтобы размер шрифта наших заголовков

изменялся в зависимости от размера экрана. Вот правила, которые мы хотим применить к нашему сайту:

• Если ширина экрана равна или меньше 480 пикселей, размер шрифта наших заголовков должен быть 16 пикселей.
• Если ширина экрана равна 481px и меньше или равна 600px, размер шрифта заголовка должен быть 20px.
• Если ширина экрана равна или больше 601 пикселя, размер шрифта заголовка должен быть 24 пикселя.

Мы могли бы использовать следующие три медиа-запроса для изменения размера шрифтов на нашей веб-странице в зависимости от размера экрана пользователя:

 

 Это пример заголовка. 

  
<стиль>

@media screen и (min-width: 480 пикселей) {
h2 {
размер шрифта: 16 пикселей;
}
}

@media screen и (min-width: 481px) и (max-width: 600px) {
h2 {
размер шрифта: 20 пикселей;
}
}

@media screen и (min-width: 601px) {
h2 {
размер шрифта: 24 пикселя;
}
}
<стиль> 

Нажмите кнопку

в редакторе кода выше, чтобы увидеть результат нашего кода HTML / CSS.

Давайте разберемся, как работает наш код. В нашем HTML-файле мы определили пример заголовка с помощью тега

, который показывает текст

. Это пример заголовка .

Затем в нашем файле CSS мы определили три медиа-запроса.

Первый медиа-запрос проверяет, равен ли размер области просмотра браузера 480 пикселей или меньше (с использованием max-width: 480 пикселей), и устанавливает размер шрифта всех элементов

равным 16 пикселей, если этот оператор принимает значение true.

Второй медиа-запрос проверяет, равен ли размер области просмотра 481 пикселю или больше (с использованием min-width: 481px) и равен или меньше 600 пикселей (с использованием max-width: 600px).Если это истинно, размер шрифта для всех элементов

устанавливается на 20 пикселей.

Третий медиа-запрос проверяет, превышает ли размер области просмотра 601 пиксель (с использованием min-width: 601px). Если это правило истинно, размер шрифта всех элементов

изменяется на 24 пикселя.

Точки останова медиа-запроса

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

При разработке медиа-запроса вы можете задать себе вопрос: какие размеры мне следует использовать для настройки медиа-запросов? Это разумный вопрос, потому что, когда вы только начинаете заниматься адаптивным веб-дизайном, вам может быть сложно определить размеры устройств, на которых должен отображаться ваш веб-сайт.

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

Лучший способ определить, когда должен срабатывать медиа-запрос, — это просмотреть на своем веб-сайте любые места, где элементы сжаты или обрезаны.Итак, если вы видите элемент, который не полностью отображается на мобильном устройстве, вы знаете, что вам может потребоваться добавить точку останова.

Затем, как только вы определили эти точки, вы можете написать собственные правила для мультимедиа. Например, вы можете понять, что тег

  import React from 'react';
импортировать useMediaQuery из '@ material-ui / core / useMediaQuery';

экспортировать функцию по умолчанию SimpleMediaQuery () {
  const соответствует = useMediaQuery ('(минимальная ширина: 600 пикселей)');

  return  {`(min-width: 600px) соответствует: $ {matches}`} ;
}  

  импортировать {useTheme} из '@ material-ui / core / styles';
импортировать useMediaQuery из '@ material-ui / core / useMediaQuery';

function MyComponent () {
  const theme = useTheme ();
  const соответствует = useMediaQuery (theme.breakpoints.up ('sm'));

  return  {`theme.breakpoints.up ('sm') соответствует: $ {matches}`} ;
}  

  импортировать useMediaQuery из '@ material-ui / core / useMediaQuery';

function MyComponent () {
  const соответствует = useMediaQuery (theme => theme.breakpoints.up ('sm'));

  return  {`theme.breakpoints.up ('sm') соответствует: $ {matches}`} ;
}  

  import React from 'react';
импортировать json2mq из json2mq;
импортировать useMediaQuery из '@ material-ui / core / useMediaQuery';

экспортировать функцию по умолчанию JavaScriptMedia () {
  const соответствует = useMediaQuery (
    json2mq ({
      minWidth: 600,
    }),
  );

  return  {`{minWidth: 600} соответствует: $ {match}`} ;
}  

  импортировать mediaQuery из css-mediaquery;

function createMatchMedia (width) {
  return query => ({
    соответствует: mediaQuery.match (запрос, {ширина}),
    addListener: () => {},
    removeListener: () => {},
  });
}

описать ('MyTests', () => {
  beforeAll (() => {
    window.matchMedia = createMatchMedia (window.innerWidth);
  });
});  

  импортировать ReactDOMServer из 'response-dom / server';
импортировать парсер из ua-parser-js;
импортировать mediaQuery из css-mediaquery;
импортировать {ThemeProvider} из '@ material-ui / core / styles';

function handleRender (req, res) {
  const deviceType = parser (req.заголовки ['user-agent']). device.type || 'рабочий стол';
  const ssrMatchMedia = query => ({
    совпадения: mediaQuery.match (query, {
      
      width: deviceType === 'мобильный'? '0px': '1024px',
    }),
  });

  const html = ReactDOMServer.renderToString (
    
      <Приложение />
    ,
  );

  
}  

  импорт React из react;
импортировать useMediaQuery из '@ material-ui / core / useMediaQuery';

экспортировать функцию по умолчанию SimpleMediaQuery () {
  const соответствует = useMediaQuery ('(минимальная ширина: 600 пикселей)');

  return  {`(min-width: 600px) соответствует: $ {matches}`} ;
}  

  @media not all и (prefers-reduce-data), (prefers-Reduced -данные) {
  ...
}
  

  const isSupported = window.matchMedia (
  `не все и (предпочитает сокращенные данные), (предпочитает сокращенные данные)`
  ).Матчи;
  

  const query = '(предпочитает сокращенные данные)';
const resolvedMediaQuery = window.matchMedia (запрос) .media;

const isSupported = запрос === resolvedMediaQuery;