Media queries
Медиавыражения (media queries) являются ключевым компонентом отзывчивого дизайна, который делает возможным для CSS адаптироваться в зависимости от различных параметров или характеристик устройства. Например, медиавыражение может применить различные стили, если экран меньше определённого размера, или в зависимости от того находится устройство в портретном или альбомном режиме. @media @-правило используется чтобы задать условия применения стилей к документу.
Кроме того, синтаксис медиавыражений используется в других контекстах, таких как атрибут media элемента <source>, для определения, нужно или нет использовать этот источник, когда выбирается определённое изображение для использования в элементе <picture>.
In addition, the Window.matchMedia() method can be used to test the window against a media query. You can also use MediaQueryList.addListener() to be notified whenever the state of the queries changes. With this functionality, your site or app can respond to changes in the device configuration, orientation, or state.
You can learn more about programmatically using media queries in Testing media queries.
Reference
@-правила
Guides
- Using media queries
-
Introduces media queries, their syntax, and the operators and media features which are used to construct media query expressions.
- Testing media queries
-
Describes how to test media queries from your JavaScript code, programmatically, to determine the state of the device, and to set up listeners that let your code be notified when the results of media queries change (such as when the user rotates the screen, causing an orientation change).
Спецификации
| Specification |
|---|
| Media Queries Level 3 |
| Media Queries Level 4 |
| Media Queries Level 5 |