css3--Media Query @media

Media queries can use different styles under different conditions to make the page different rendering results under different terminal devices. The previous section briefly describes how media queries is referenced to the project, but media queries has its own rules for using it. Specifically, Media queries is used as follows.

@media Media type and (media attribute) {your style}

Note: You must use media queries to start with "@media", then specify the media type (also known as the device type), followed by the specified media characteristics (also known as device features). The way the media is written and the style is written in a very similar way, mainly divided into two parts, the first part refers to the media characteristics, the second part is the media characteristics of the specified value, and the two parts are separated by a colon. For example:

(max-width:480px)
As you can tell from the previous table, there are 10 media types and 13 media features, which are grouped in a similar way to different CSS collections.
Unlike CSS properties, however, media characteristics are expressed by Min/max to be greater than or equal to or less than logical judgments,
Instead of using symbols less than (<) and greater than (>) to judge. Let's take a look at the ways media queries are used in real-world projects.

1. Max width max-width

"Max-width" is the most commonly used feature in media features, meaning that the style takes effect when the media type is less than or equal to the specified width . Such as:

@media screen and (max-width:480px) {. ads {   display:none;  }}

The above indicates that when the screen is less than or equal to 480px, the ad block (. ads) on the page will be hidden.

2. Minimum width min-width

"Min-width", in contrast to "max-width", refers to when the media type is greater than or equal to the specified width, the style takes effect .

@media screen and (min-width:900px) {. wrapper{width:980px;}}

The above means: when the screen is greater than or equal to 900px, the width of the container ". Wrapper" is 980px.

3. Use of multiple media features

Media queries can use the keyword "and" to combine multiple media features. That is, a media query can contain between 0 and more expressions, and the expression can contain 0 to more keywords, as well as a media type.

When the screen is between 600px~900px, the body's background color is rendered as "#f5f5f5" as shown below.

@media screen and (min-width:600px) and (max-width:900px) {  body {background-color: #f5f5f5;}}

4. Output width of device screen devices width

On smart devices, such as the iphone, ipad, and so on, you can also set the appropriate style (or call the appropriate style file) based on the size of the screen device. Similarly, for screen devices, you can also use the "Min/max" corresponding parameter, such as "Min-device-width" or "max-device-width".

<link rel= "stylesheet" media= "screen and (max-device-width:480px)" href= "Iphone.css"/>

The above code refers to the "IPHONE.CSS" style for the maximum device width of 480px, such as the display on the iphone, where "max-device-width" refers to the actual resolution of the device, that is, the visual area resolution.

5. Not keyword

the use of the keyword "not" is used to exclude a certain type of media , that is, to exclude an expression-compliant device. In other words, the NOT keyword indicates that the following expression is reversed, such as:

@media not print and (max-width:1200px) {style code}

The code above indicates that the style code will be used in all devices except the print device and device width of less than 1200px.

6.only Keywords

Only is used to specify a specific media type that can be used to exclude browsers that do not support media queries. In fact, only many times it is used to hide style sheets for devices that do not support media query but support media type. It mainly includes: the device that supports the media characteristic, the normal invocation style, when only does not exist, indicates that the media is not supported, but the media type of the device, so it will not read the style, because its first will read only instead of screen, but also does not support the media queries browser, Styles are not used, whether or not they are supported. Such as

<linkrel= "stylesheet" media= "only screens and (max-device-width:240px)" href= "Android240.css"/>

If media Type is not explicitly specified in media query, it defaults to all, such as:

<linkrel= "stylesheet" media= "(min-width:701px) and (max-width:900px)" href= "Mediu.css"/>

In addition, in styles, you can also use multiple statements to apply the same style to different media types and media attributes, as indicated below.

<linkrel= "stylesheet" type= "Text/css" href= "Style.css" media= "handheld and (max-width:480px), screen and (min-width : 960px) "/>

The style.css style in the code above is used on a handheld device with a width less than or equal to 480px, or on a device with a screen width greater than or equal to 960px.

So far, CSS3 Media queries has been supported by a wide range of browsers, in addition to the ie6-8 Browser, which is perfectly supported in all modern browsers. Another difference is thatMedia queries do not add prefixes in different browsers like other CSS3 properties in other browsers .

Reference: https://www.cnblogs.com/zyl-Tara/p/5519144.html

css3--Media Query @media