1. The words written in the front

Front of ecology is very prosperous, technology update iterative soon, many of the new framework and technology constantly innovation, at the same time, on the other hand, with the continuous development of science and technology, the user is becoming more and more diversified ways of obtaining information and media, the content of the front end output [page] requires to fit a variety of media and terminal, give users a better experience, The media query module in CSS plays an important role in this, so that your output “responds” to the user’s different scenarios of information acquisition.

2. Specification definition

Let’s first look at the definition of a specification

HTML4 [HTML401] and CSS2 [CSS21] currently support media-dependent style sheets tailored for different media types. For example, a document may use different style sheets for screen and print. In HTML4, this can be written as:

HTML4[HTML401] and CSS2[CSS21] now support device-independent stylesheets customized for different media types. For example, a document can use different style sheets for display and print. In HTML4, there are two ways to write:

The first way:

Specify the media type to which the stylesheet applies directly in the stylesheet link.

The second way is:

@media screen { * { font-family: sans-serif } }

Specify style definitions for a particular media type in the style sheet through the media rule.

The ‘print’ and ‘screen’ media types are defined in HTML4. The complete list of media types in HTML4 is: ‘Aural’, ‘Braille’, ‘Handheld’, ‘print’, ‘screen’, ‘tty’, ‘TV’. She will be removed ‘aural’ and adds’ embossed ‘and’ speech ‘in the future. ‘All’ is used to indicate that the style sheet applies to all media types.

The two media types mentioned above were defined in HTML4. The complete media types defined in HTML4 are: ‘Aural’, ‘Braille’, ‘Handheld’, ‘print’, ‘Projection’, ‘screen’, ‘tty’, and ‘TV’. The list of media types defined in CSS2 is the same as THAT in HTML4, except that ‘Aural’ is discarded and ’embossed’ and ‘Speech’ are added. ‘All’ is also used to indicate that the style definition applies to all media types.

Multiple user agents, such as browsers, support media-specific style sheets. The most common media types are “screen” and “print”. In many cases, we would describe in more detail what type of output device stylesheets should be applied to. Fortunately, HTML4 anticipated these requests and defined forward-compatible syntax for media types, as detailed in HTML4, Section 6.13.

3. Apply the rules

A media query consists of a media type, zero or more expressions that check the application judgment of a particular media feature. In addition to the two main ways to apply media queries, we can apply media queries in the @import rule

@import url(color.css) screen and (color);

A media query is a logical expression that can be true or false. A media query is true if the media type of the media query matches the media type of the device on which the user agent is running, and all expressions in the media query are true. Provides a shorthand syntax for media queries that apply to all media types. You can omit the keyword “all” (followed by “and”). That is, if the media type is not specified, it is all. Such as:

@media all and (min-width:500px) {… }

@ media (min – width: 500 px) {… }

Both of these are ok, and the scope of application is the same.

Media queries can be combined. You can combine several of them in the media query list. Media query lists are separated by commas. If one or more media queries in a comma-separated list are true, the entire list is true, otherwise false. In media query syntax, the comma stands for logical “or” and the keyword “and” stands for logical “and”.

@media screen and (color), projection and (color) {… }

If the media query list is empty (that is, declared as an empty string or composed only of Spaces), the result evaluates to true. Equivalent to the following two definitions:

@ media all {… }

@ media {… }

Logical non can be indicated by the ‘not’ keyword.

The keyword “no” at the beginning of a media query negates the result. That is, if a media query is true without the ‘not’ keyword, it will become false and vice versa. User agents that do not support this keyword will not recognize the “NOT” keyword and will not apply the associated stylesheet.

Another popular keyword is “only”, which can also be used to hide stylesheets from older user agents. Unlike the keyword “not”, the user agent must process media queries that begin with “only” as if the “only” keyword did not exist.