Detailed explanation of the actual use of @media in CSS3

This tutorial explains the actual use of @media in CSS3 in detail

Syntax:

CSS Code copies content to the clipboard

@media ：<sMedia> { sRules }

Value:

<sMedia>：
    指定设备名称。
{sRules}：
    样式表定义。

Instructions:

Determine the media (object) type to achieve different presentations. This feature allows CSS to operate more accurately on different media types and different conditions of the same media (resolution, color number, etc.).

Copy code The code is as follows:

media_query: [only | not]? <media_type> [ and <expression> ]*
expression: ( <media_feature> [: <value>]? )
media_type: all | aural | braille | handheld | print | projection | screen | tty | tv | embossed
media_feature: width | min-width | max-width 
| height | min-height | max-height
| device-width | min-device-width | max-device-width
| device-height | min-device-height | max-device-height
| device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
| color | min-color | max-color
| color-index | min-color-index | max-color-index
| monochrome | min-monochrome | max-monochrome 
| resolution | min-resolution | max-resolution
| scan | grid

Common writing:

CSS Code Copy content To the clipboard

@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/  
  .class {   
    background: #ccc;   
  }   
}

@media screen and This is the most common way of writing, followed by a limited screen size

with all and only

Generally all and only appear together.

CSS Code copies content to the clipboard

@media all and (min-width:xxx) and (max-width:xxx){   
/*这段查询的all是针对所有设备(有些设备不一定是屏幕，也许是打字机，盲人阅读器)*/  
}

@media only screen and (min-width:xxx) and (max-width:xxx){   
/*上面针对了所有设备，这段是只(only)针对彩色屏幕设备*/  
}   
device-aspect-ratio

device-aspect-ratio can be used to adapt to devices with specific screen aspect ratios. This is also a very useful attribute. For example, our page wants Define a style for normal screens with an aspect ratio of 4:3, and then define another style for widescreens with an aspect ratio of 16:9 and 16:10, such as adaptive width and fixed width:

Usage:

CSS Code copies content to the clipboard

@media only screen and (device-aspect-ratio:4/3)

The above is the detailed explanation of the actual use of @media in CSS3. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!