Summary of new features of CSS3 (media query)_html/css_WEB-ITnose

CSS3 media queries are an expansion and improvement of CSS2 media types;

CSS2 media types only define some device keywords, while CSS3 media queries further expand such as Width, height, color and other attributes with value ranges;

The difference between media query and media type is: media query is a value or a range of values, while media type is just a match of the device (so media type is a word, and media query needs to be followed by a value, the two can be mixed);

media can be used for the link tag attribute [media]

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

and css files, the following code uses media in css;

Introducing the available operators & commonly used media types and media query:

Operators:

and:

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

@media screen and (max-width : 600px) {/*匹配宽度小于600px的电脑屏幕*/}

not:

The not operator is used to negate, all those that do not satisfy this rule are matched

@media not print {/*匹配除了打印机以外的所有设备*/}

Please note when using not, if you do not add parentheses, some strange phenomena may occur. , Example:

@media not all and (max-width : 500px) {}/*等价于*/@media not (all and (max-width : 500px)) {}/*而不是*/@media (not all) and (max-width : 500px) {}

So, if you want to use not, it is more clear to add brackets explicitly

, (comma):

Equivalent to or is used to match if one of the two sides is satisfied

@media screen , (min-width : 800px) {/*匹配电脑屏幕或者宽度大于800px的设备*/}

Media Type (only a few commonly used ones will be mentioned, and links will be given for the rest):

All:

all is the default value, matching all devices;

@media all {/*可以过滤不支持media的浏览器*/}

Screen:

matches computer screens;

Print:

Match the printer (it will also match when printing preview) [My resume has a set of styles specifically for printing~]

Commonly used Generally speaking, these three types are the only ones. If you are interested in the other Media Type, you can read the description of W3School or the documentation of W3

Media Query (also some commonly used ones): //Need to pay attention The thing is, Media Query must add brackets. A bracket is a query

max-width(max-height):

@media (max-width : 600px) {/*匹配界面宽度小于600px的设备*/}

min-width(min -height):

@media (min-width : 400px) {/*匹配界面宽度大于400px的设备*/}

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

@media (max-device-width : 800px) {/*匹配设备(不是界面)宽度小于800px的设备*/}

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

@media (min-device-width : 600px) {/*匹配设备(不是界面)宽度大于600px的设备*/}

It is better to use device-width/device-height when doing mobile development, because some mobile browsers will do this by default Make some scaling to the page, so matching according to the device width and height will be closer to the effect expected during development;

The link to W3's document that gives all Media Query attribute values ​​​​can also take a look at MDN, A volunteer has Chineseized the MDN Media Query document

media can be nested:

@media not print {    /*通用样式*/    @media (max-width:600px) {        /*此条匹配宽度小于600px的非打印机设备*/         }    @media (min-width:600px) {        /*此条匹配宽度大于600px的非打印机设备*/         }}

This saves the redundancy of writing not print twice. .Writing like this also has certain benefits, because some browsers may only support Media Type but not Media Query- - (Don’t ask me why I know, I’ve been through the trap)

Media Query (only the ones above) The unit of the value of ) can be px em rem (%/vh/vw/vmin/vmax etc. I haven’t tried it...it seems useless...);

Media Query is a responsive page The core of responsive pages is actually to display different effects at different resolutions;

When writing responsive page CSS, it is divided into small to large and large to small (size);

Myself It is weakly recommended to use the max-series for Media Query written from small sizes, and vice versa for large sizes;

Please point out any errors and shortcomings in this article;