CSS references little-known media queries, and css references little-known

CSS references little-known media queries, and css references little-known

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

The following code is used:

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

Reference a similar table. Media attributes.

First, the media query expression asks about the media type (Are you a display screen ?), Then I asked about the media features (is the display Vertically Placed ?). Any vertically placed display device is loaded

Portrait-screen.css style sheet, which is ignored by other devices.

If not is appended at the beginning of a media query, the query logic is reversed.

For example

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

It can also be used like this,

Only display devices with a display width greater than 800 pixels can load files.

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

Extended to the depth, you can use commas to represent or operations, as long as one of them is satisfied.

Of course, apart from media queries, they can be used not only to reference css style sheets, but also to style sheets.

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

In addition, the @ import command is used to reference other style sheets in the current style sheet in the css style sheet. For example

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

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