CSS3 's media query learning strategy

A media query contains a media type and at least one expression that restricts the scope of the style sheet by using media attributes.

Grammar

A media query contains a media type and an expression to multiple test media attributes (media feature), and expressions and media types are calculated to TRUE or false based on the actual situation. If the specified media type conforms to the current device and the media attribute expression is true, the current media query is true.

When a media query is true, the corresponding style sheet takes effect under Normal style rules. The style specified in media query is always downloaded.

Media type is optional, with the default value of all, unless the not or only operator is used.

logical operators

And: Used to combine multiple media features (medium feature) to a media query

Entire media query is true only if all feature expressions are true and media types are met.

The following is a simple media query that detects a media feature when media type is all:

CSS code copy content to clipboard

@media (min-width:700px) {}

When we need to add a restriction condition, we can use and accomplish the following purposes:

CSS code copy content to clipboard

@media (min-width:700px) and (Orientation:landscape) {}

The above media query only has viewport greater than 700px and width &bt; Effective when height. If you need to restrict the media type to a color computer monitor at this point, you can add media type with and:

CSS code copy content to clipboard

@media screen and (min-width:700px) and (Orientation:landscape) {}

, comma operator: Used to combine multiple media query to apply a style when any media query is true.

The comma operator is equivalent to or in a logical operator. Each of the comma-delimited media query needs to be evaluated separately, and other operators that use a media query do not affect other media query.

If you need to apply styles to all devices that are larger than 700px wide or color computer screens that are wider than the height, you can use the following rules:

CSS code copy content to clipboard

@media (min-width:700px), screen and (Orientation:landscape) {}

Not: To reverse the entire media query result, must be at the beginning of a media query

In a comma-delimited number of media query, not only takes effect for media query that it does. Not cannot reverse a single media feature and can only function across media query

Example 1: The following not will be evaluated at the end:

CSS code copy content to clipboard

@media not all and (monochrome) {}

Equivalent to the following query:

CSS code copy content to clipboard

@media not (monochrome) {}

Example 2: The following multiple media query evaluation

CSS code copy content to clipboard

@media not-screen and (color), print and (color) {}

The Order of evaluation is as follows:

CSS code copy content to clipboard

@media (not (color)), print and (color) {}

Only: To hide a media query from an earlier browser, only must be at the beginning of media query

CSS code copy content to clipboard

@media (not (color)), print and (color) {}

Browsers that do not recognize media queries require a comma-separated list of media types, which the specification requires: they should truncate each value before the first non-numeric or letter that is not a hyphen. So the above example explains:

CSS code copy content to clipboard

@media only {}

The style sheet is ignored because there is no media type only. If you do not add only, the following example

CSS code copy content to clipboard

@media screen and (min-width:400px) and (max-width:600px) {}

is resolved to @media screen {} So even if the browser doesn't know what media query really means, the style will apply to all of the on-screen devices. Unfortunately, Ie6-8 did not implement the specification correctly. A device that does not have a style applied to all screens ignores the entire style sheet.

In spite of this behavior, if you want to hide styles from other browsers that are less common, it is still recommended that you add only in front of the media query.

Media type

All: Applicable with all equipment

Print:paged material and documents viewed on screen in print Previe mode.

Screen: Color Computer monitor

Speech:intended for speech synthesizers

Note: CSS2.1 and CSS3 Media query define TTY, TV, projection, handheld, Braille, embossed, aural these media type, but they are discarded in media queries 4 , so it's not recommended.

Media features (feature)

Here are some media feature, not all

Width:viewport width

Height:viewport height

Aspect-ratio:viewport's height, for example: 16/9

Orientation: Size Relation of width and height.

Resolution:pixel density of the output device

Scan:scanning process of the output device

Grid:is the device a grid or bitmap

Color:number of bits per color component of the output device, or zero if the device isn ' t color

Color-index:number of entries in the output device ' s color lookup table, or zero if the device does not use such a table

Common methods for media query

Exclusive (Exclusive)

To ensure that only one style sheet takes effect under one condition, the query criteria are strictly divided, as follows:

CSS code copy content to clipboard

@media (max-width:400px) {

HTML {

background:red;

}

}

@media (min-width:401px) and (max-width:800px) {

HTML {

Background:green;

}

}

@media (min-width:801px) {

HTML {

Background:blue;

}

}

Overlay (overriding)

You can set the same priority on an element, use style order, and override to avoid exclusive

CSS code copy content to clipboard

@media (min-width:400px) {

HTML {

background:red;

}

}

@media (min-width:600px) {

HTML {

Background:green;

}

}

@media (min-width:800px) {

HTML {

Background:blue;

}

}

Wireless Port priority (Mobile first)

The default style is assumed to be the mobile device width, and then the Min-width control extends the style

CSS code copy content to clipboard

HTML {

background:red;

}

@media (min-width:600px) {

HTML {

Background:green;

}

}

PC Priority (Desktop first)

Default to style settings with widescreen, overriding by Max-width control style

CSS code copy content to clipboard

HTML {

background:red;

}

@media (max-width:600px) {

HTML {

Background:green;

}

}