With the rapid popularization of mobile devices, users no longer only browse web content through traditional computer systems, but more and more users start to browse web content using smartphones, tablet computers or other devices of various sizes. Users of different devices can have a good experience and need to use media queries .
Media query is one of the most important functions of CSS style sheets . The so-called media query refers to distinguishing various devices (such as computers, mobile phones, tablets, Braille devices, etc.) according to different media types (device types) and conditions . And define different CSS styles for them respectively. Media queries allow CSS to act more accurately on different devices or different conditions of the same device, so that all users can get a good user experience.
1. Media type
The media type is used to indicate the category of the device. CSS provides some keywords to indicate different media types, as shown in the following table:
| media type | describe |
|---|---|
| all | Indicates all media devices |
| aural | (auditory, auditory) denoting speech and audio synthesizers (hearing devices) |
| braille | (written in Braille) Denotes a Braille tactile feedback device for the blind |
| embossed | Represents a Braille printer for the blind |
| handheld | Indicates small handheld devices such as mobile phones, tablets |
| Indicates the printer | |
| projection | Indicates the projection device |
| screen | Indicates a computer monitor |
| tty | Represents media that uses a fixed-density alphabetic grid, such as a typewriter or terminal device |
| tv | Indicates a TV type device |
2. Media Features
In addition to the specific type, some attributes can also be used to describe the specific characteristics of the device , such as width, height, resolution, etc., as shown in the following table:
| value | describe |
|---|---|
| aspect-ratio | (aspect ratio) The aspect ratio of the visible area of the output device page |
| color | The bit value of each pixel of the output device, the common ones are 8, 16, and 32 bits. The value is 0 if the device does not support color output |
| color-index | The number of entries in the output device's color lookup table. If no color lookup table is used, this value is equal to 0 |
| device-aspect-ratio | The aspect ratio of the output device |
| device-height | The visible height of the output device screen |
| device-width | The visible width of the output device screen |
| grid | Query whether the output device uses a grid screen or a dot matrix screen |
| height | The height of the visible area of the page |
| max-aspect-ratio | The maximum ratio of the width to height of the visible area of the output device screen |
| max-color | The maximum value of the bit value per pixel of the output device |
| max-color-index | The maximum number of entries in the color lookup table for an output device |
| max-device-aspect-ratio | The maximum ratio of the width to height of the visible area of the output device screen |
| max-device-height | The maximum height of the visible area of the output device screen |
| max-device-width | The maximum visible width of the output device screen |
| max-height | The maximum height of the visible area of the page |
| max-monochrome | The maximum bit depth per pixel in the output device's monochrome framebuffer. If the device is not a black and white screen, the value is 0 |
| max-resolution | The maximum resolution of the device |
| max-width | The maximum width of the visible area of the page |
| min-aspect-ratio | Minimum ratio of width to height of the visible area of the output device screen |
| min-color | The minimum value in bits per pixel for the output device |
| min-color-index | The minimum number of entries in the color lookup table for an output device |
| min-device-aspect-ratio | The minimum ratio of the width to height of the screen visible area of the output device |
| min-device-width | The minimum visible width of the output device's screen |
| min-device-height | The minimum visible height of the output device's screen |
| min-height | The minimum height of the visible area of the page |
| min-monochrome | The minimum bit depth per pixel in the output device's monochrome framebuffer. If the device is not a black and white screen, the value is 0 |
| min-resolution | The minimum resolution of the device |
| min-width | The minimum width of the visible area of the page |
| monochrome | The bit depth per pixel in the output device's monochrome framebuffer. If the device is not a black and white screen, the value is 0 |
| orientation | The rotation direction of the visible area of the page |
| resolution | The resolution of the device. Such as: 96dpi, 300dpi, 118dpcm |
| scan | Scanning process for TV equipment |
| width | The width of the visible area of the page |
3. Logical operators
逻辑操作符包含 not、and 和 only 三个，通过逻辑操作符可以构建复杂的媒体查询，您还可以通过逗号来分隔多个媒体查询，将它们组合为一个规则。
- and：用于将多个媒体查询组合成一条媒体查询，当每个查询规则都为真时则该条媒体查询为真，另外通过 and 操作符还可以将媒体特性与媒体类型结合在一起；
- not：用于否定媒体查询，当查询规则不为真时则返回 true，否则返回 false。如果使用 not 操作符，则还必须指定媒体类型；
- only：仅在整个查询匹配时才会生效，当不使用 only 时，旧版的浏览器会将 screen and (max-width: 500px) 简单地解释为 screen，忽略查询的其余部分，并将样式应用于所有屏幕。 如果使用 only 运算符，则还必须指定媒体类型。
4. 定义媒体查询
目前您可以通过以下两种方式来定义媒体查询：
- 使用 @media 或 @import 规则在样式表中指定对应的设备类型；
- 用 media 属性在 <style>、<link>、<source> 或其他 HTML 元素中指定特定的设备类型。
1) @media
在《CSS @规则》一节中我们已经简单了解 @media，使用 @media 您可以指定一组媒体查询和一个 CSS 样式块，当且仅当媒体查询与正在使用的设备匹配时，指定的 CSS 样式才会应用于文档。示例代码如下：
/* 在小于或等于 992 像素的屏幕上，将背景色设置为蓝色 */
@media screen and (max-width: 992px) {
body {
background-color: blue;
}
}
/* 在 600 像素或更小的屏幕上，将背景色设置为橄榄色 */
@media screen and (max-width: 600px) {
body {
background-color: olive;
}
}2) @import
@import 用来导入指定的外部样式文件并指定目标的媒体类型，示例代码如下：
@import url("css/screen.css") screen; /* 引入外部样式，该样式仅会应用于电脑显示器 */
@import url("css/print.css") print; /* 引入外部样式，该样式仅会应用于打印设备 */
body {
background: #f5f5f5;
line-height: 1.2;
}注意：所有 @import 语句都必须出现在样式表的开头，而且在样式表中定义的样式会覆盖导入的外部样式表中冲突的样式。
3) media 属性
您还可以在 <style>、<link>、<source> 等标签的 media 属性中来定义媒体查询，示例代码如下：
/* 当页面宽度大于等于 900 像素时应用该样式 */
<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
/* 当页面宽度小于等于 600 像素时应用该样式 */
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">Tip: You can also specify multiple media types in the media attribute, separating each media type with a comma, such as media="screen, print".