CSS references little-known media queries_html/css_WEB-ITnose

Media queries allow us to set corresponding styles based on various functional features of the device.

Such as the following code:

<link rel="stylesheet" media="screen and (orientation:portrait)" href="portrait-screen.css"/>

refers to a style sheet. Mainly look at the media attribute.

First, the media query expression asks about the media type (are you a display?), and then asks about the media characteristics (is the display oriented vertically?). Any display device positioned in portrait orientation will load the

portrait-screen.css style sheet, and other devices will ignore it.

Appending not at the beginning of a media query will reverse the logic of the query.

For example,

<link rel="stylesheet" media="not screen and (orientation:portrait)" href="portrait-screen.css"/>

can also be used like this,

Limit that only display devices with a viewport width greater than 800 pixels will load the file

<link rel="stylesheet" media="not screen and (orientation:portrait) and (min-width:800px)" href="portrait-screen.css"/>

Extending deeper, you can use commas to represent or operations, as long as one of them is satisfied.

Of course, in addition to media queries not only used to reference css style sheets, they can also be written into style sheets

@media screen and (max-device-width:400px){	h1{color:green}}@media screen and (max-device-width:960px){	h1{color:red}}

and A more crazy usage is to use the @import directive in a CSS style sheet to reference other style sheets in the current style sheet. For example

@import url("phone.css") screen and (max-width:360px)

But remember that using the @import method of css will increase HTTP requests (this will affects loading speed), so please use this method with caution.