(Conversion) responsive layout media queries

Media queries is very powerful. It allows you to customize different resolutions and devices without changing the content, make the web page displayed properly under different resolutions and devices without losing the style.
First, let's look at a simple example:

The Code is as follows:

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

The preceding media statement indicates that when the page width is smaller than or equal to 600px, small.css is used to render your web page. First, let's take a look at the content in the media statement:
1. Screen: This is a media type that everyone knows;
2. And: it is called a keyword. It is similar to not, only, which will be introduced later;
3. (Max-width: 600px): This is the media feature. To put it bluntly, it is the media condition.

In order to better understand media query, we will return to the previous example: convert to the following code in CSS:

The Code is as follows:

@ Media screen and (max-width: 600px) {selector {attribute: attribute value ;}}

In practice, the style in the small.css file is placed in @ media srceen and (max-width; 600px ){...} . In the statement structure above the statement, we can see that the attributes set of media query and CSS are very similar. The main differences are as follows:
1. Media query only accepts a single logical expression as its value or has no value;
2. CSS attributes are used to declare how the page information is displayed. Media query is an expression used to determine whether the output device meets certain conditions;
3. Most of media queries accept the min/MAX prefix, which is used to represent the logical relationship. It indicates that the prefix is used when the value is greater than or equal to a certain value.
4. the CSS attribute must have an attribute value. Media query can have no value because its expression only returns true or false values.

Let's take a look at the specific use of media queries.
I. max width

The Code is as follows:

<link rel="stylesheet" media="screen and (min-width:900px)" href="big.css" type="text/css" />

The above indicates that when the screen is larger than or equal to 900px, the big.css style is used to render the web page.

2. Use multiple media queries

The Code is as follows:

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

Media query can be combined with multiple media queries. In other words, a media query can contain 0 to multiple expressions, an expression can contain 0 to multiple keywords, and a media type. When the screen is on the px-900pxs page, the style.css style is used to render the web page.
3. device screen output width device width

The Code is as follows:

<link rel="stylesheet" media="screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />

The actual Code indicates that the iphone.css style is applicable to a device with a maximum width of PX. For example, for the display on the iPhone, the max-device-width indicates the actual resolution of the device, that is, the visible area resolution.
We can use media query to provide specific styles for Android phones at different resolutions, so that we can solve the problem of page reconstruction for Android phones with different screen resolutions.

4. Not keywords

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

The not keyword is used to exclude a specified media type. In other words, it is used to exclude devices that conform to expressions.

 

5. Only keywords 

<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />

Only is used to specify a specific media type. It can be used to exclude browsers that do not support media queries. In fact, only many times is used to hide style sheets for devices that do not support media query but support media types. The main features are: media queries (media queries) devices that support media queries and call styles normally. In this case, only does not exist. For media queries (media queries) however, media type is also supported, so that the style will not be read, because it first reads only instead of screen; in addition, media qqueries browsers are not supported, whether or not only is supported, style is not used.

 

Vi. Others
If media type is not explicitly specified in media query, the default value is all, for example:

<link rel="stylesheet" media="(min-width: 701px) and (max-width: 900px)" href="medium.css" type="text/css" />

In addition, comma (,) is used to represent the parallel or representation or, as follows:

<link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />

Style.css is used on a handheld device whose width is less than or equal to PX, or on a device whose screen width is greater than or equal to 960px.

This section describes how to use media query. In the end, the general rule describes its function. I personally think it is a sentence: media queries can use different styles under different conditions, use pages to achieve different rendering effects.

(Conversion) responsive layout media queries