Analysis on Media Queries of CSS3

This article mainly introduces about CSS3 Media Queries (responsive layout allows you to customize different resolutions and devices), which has certain reference value. Now I share it with everyone. Friends in need can refer to it

Media Queries This function is very powerful. It allows you to customize different resolutions and devices, and allows the web pages you create to be displayed in different resolutions and devices without changing the content. Normal, and will not lose the style because of this

Media Queries This function is very powerful. It allows you to customize different resolutions and devices, and allows you to create web pages without changing the content. The page displays normally under different resolutions and devices without losing style.
First let’s look at a simple example:

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

The above media statement means: when the page width is less than or equal to 600px, call the small.css style sheet to render your web page. First, let’s look at the content contained in the media statement:
1. Screen: Needless to say, everyone knows this, and refers to a media type;
2. and: is called a keyword, and is similar to it. There are not and only, which will be introduced later;
3. (max-width: 600px): This is the media characteristic. To put it simply, it is the media condition.
In order to better understand Media Query, we return to the previous example: the conversion into css is:

@media screen and (max-width: 600px) { 
选择器 { 
属性：属性值； 
} 
}

In fact, the style in the small.css file is placed in @media srceen and (max-width;600px){...} within the curly brackets. In the statement structure above the statement, it can be seen that the attribute sets of Media query and CSS are very similar. The main differences are:
1. Media query only accepts a single logical expression as its value, or has no value;
2. CSS attributes are used to declare how to display page information; Media Query is an expression used to determine whether the output device meets certain conditions;
3. Most of Media Query accepts min/max prefixes. Used to express its logical relationship, indicating that it applies to situations greater than or equal to or less than or equal to a certain value
4. CSS attributes require that there must be an attribute value. Media Query can have no value, because its expression only returns true or false.

Let’s take a look at the specific usage of Media Queries
1. Maximum width Max Width

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

The above indicates: when the screen is larger than or When equal to 900px, the big.css style will be used to render the web page.
2. Use of multiple Media Queries

<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. Expressions It can also contain 0 to more keywords and a Media Type. As shown above, it means that when the screen is between 600px-900px, the style.css style is used to render the web page.
3. The output width of the device screen Device Width

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

The above code refers to the iphone.css style which is applicable to the maximum device width of 480px, for example, on the iPhone display, max-device-width here refers to the actual resolution of the device, which refers to the visible area resolution
We can use media query to provide specific styles for android phones at different resolutions, so that Solve the problem of page reconstruction for android mobile phones due to different screen resolutions.
4. Not keyword

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

The not keyword is used to exclude a certain specified media type. In other words, it is used to exclude expressions that match device of.
5. The only keyword

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

only is used to define a specific media type and can be used to exclude browsers that do not support media queries. In fact, only is often used to hide style sheets for devices that do not support Media Query but support Media Type. The main ones are: for devices that support media features (Media Queries), if the style is called normally, then it will be treated as if only does not exist; for devices that do not support media features (Media Queries) but support media types (Media Type), this will The style is not read because it reads only instead of screen. In addition, browsers that do not support Media Qqueries will not use the style regardless of whether they support only.
6. Others
If the Media Type is not explicitly specified in Media Query, the default is all, such as:

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

In addition, commas (,) are used to be Used to express juxtaposition or or, as follows

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

The style.css style in the above code is used on handheld devices with a width less than or equal to 480px, or on devices with a screen width greater than or equal to 960px.
This section on the use of Media Query is introduced here. Finally, we summarize its functions. Personally, I think it is just one sentence: Media Queries can use different styles under different conditions and use pages to achieve different rendering effects. .

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

About the method of responsive centered display of CSS banner image

Ie-compatible inner shadow and outer shadow implementation effects and test code

The above is the detailed content of Analysis on Media Queries of CSS3. For more information, please follow other related articles on the PHP Chinese website!