Summarize the new features of CSS3 (Media query) and the new media of css3

Summarize the new features of CSS3 (Media query) and the new media of css3

The media query of CSS3 is an extension and improvement to the media type of CSS2;

The media type of CSS2 only defines some device keywords. The media query of CSS3 further extends attributes with value ranges, such as width, height, and color;

The difference between media query and media type is that media query is a value or a range value, and media type is only a match between devices (So media type is a word, media query must be followed by a numerical value, which can be used together );

Media can be used for link label attributes [media]

  <link rel="stylesheet" type="text/css" href="../css/print.css" media="print and (max-width : 600px)" />

And in the css file, the following code uses media in css;

This section describes available operators and common media types and media queries:

Operator: and:

The and operator is used to match the rules on both sides of the symbol if the conditions are met.

@ Media screen and (max-width: 600px) {/* match a computer screen with a width less than 600px */}

 

Not:

The not operator is used to obtain non-all matches that do not meet the rule.

@ Media not print {/* match all devices except printers */}

When using not, note that if no parentheses are added, some strange phenomena may occur, for example:

@ Media not all and (max-width: 500px) {}/* equivalent to */@ media not (all and (max-width: 500px )) {}/* instead of */@ media (not all) and (max-width: 500px ){}

Therefore, if you want to use not, you must explicitly add parentheses.

, (Comma ):

It is equivalent to or used for matching if either of the two sides meets the condition.

@ Media screen, (min-width: 800px) {/* match the screen of a computer or a device with a width greater than 800px */}

 

Media Type (only a few commonly used ones, and the rest will provide links): All:

All is the default value and matches all devices;

@ Media all {/* filter browsers that do not support media */}

Screen:

Match the computer screen;

Print:

Match the printer (it will also match during print preview) [my resume is dedicated to making a set of styles for print ~]

 

These three types are commonly used. If you are interested in other Media types, you can refer to W3School instructions or W3 documents.

 

Media Query (also common): // You must note that the Media Query must be enclosed by brackets, and a bracket is a querymax-width (max-height ):

@ Media (max-width: 600px) {/* match devices whose UI width is less than 600px */}

Min-width (min-height ):

@ Media (min-width: 400px) {/* match a device whose UI width is greater than 400px */}

Max-device-width (max-device-height ):

@ Media (max-device-width: 800px) {/* match a device whose width is less than 800px (not the interface */}

Min-device-width (min-device-height ):

@ Media (min-device-width: 600px) {/* match a device whose width is greater than 600px (not the interface */}

It is better to use device-width/device-height for mobile development, because some mobile browsers will scale the page by default, therefore, matching based on the device width and height will be closer to the expected effect during development;

Link W3 to all Media Query attribute values can also be viewed in the MDN document. Volunteers have compiled the MDN Media Query document.

Media can be nested:

@ Media not print {/* General style */@ media (max-width: 600px) {/* this non-printer device with a matching width less than 600px */} @ media (min-width: 600px) {/* this non-printer device with a matching width greater than 600px */}}

This saves the redundancy of writing not print twice. this write method also has some benefits, because some browsers may only support Media Type but not Media Query--(don't ask me why I know, it's a pitfall)

The unit of the value of Media Query (only those above) can be px em rem (%/VL/vw/vmin/vmax or something. No trial... it seems useless ...);

Media Query is the core of responsive pages. In fact, responsive pages display different effects at different resolutions;

Compile the response page CSS from small to large and from large to small (size );

I am weak. I recommend that you use the max-series for Media queries written in small sizes. The opposite is true for large sizes;

Please point out any errors or deficiencies in this article;