Explanation of Media Queries and mediaqueries
Media Queries is called "Media query". In our daily Web pages, we often see this code in the head section:
<Link href = "css/reset.css" rel = "stylesheet" type = "text/css" media = "screen"/>
<Link href = "css/style.css" rel = "stylesheet" type = "text/css" media = "all"/>
<Link href = "css/print.css" rel = "stylesheet" type = "text/css" media = "print"/>
Or in the following format:
<Style type = "text/css" media = "screen">
@ Import url ("css/style.css ");
</Style>
I don't know if you have noticed it. Either of the methods for introducing CSS styles has a common attribute "media", which is used to specify a specific media type, in HTML4 and CSS2, you may use "media" to specify a specific media type,
For example, screen and print styles, there are also others, such as "TV" and "handheld, "all" indicates that all media are supported. For more Media types, click here.
The above briefly describes the "Media Queries" of HTML4 and CSS2. Today, we mainly want to learn more about the "Media Queries" in CSS3, let's start with today's theme.
Media Queries in CSS3 adds more Media Queries. You can also add expressions of different Media types to check whether the Media meets certain conditions. If the Media meets the corresponding conditions, the corresponding style sheet is called.
In other words, "In CSS3, we can set different types of media conditions and call the corresponding style sheet for the media that meet the conditions ".
Now, the most common example is that you can set different styles for the screen and mobile devices of a PC at the same time. This feature 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:
<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.
The previous simple example introduces two concepts: Media Type and Media Query. First, let's take a look at these two concepts:
1. Media Type)
Media Type is a common attribute in css2 and a useful attribute. You can specify different styles for different devices by Media types, in css2, we often encounter all (all), screen (screen)
, Print (page printing or hitting Qiu Preview mode), in fact there are more than three media types, w3c lists a total of 10 media types.
There are also many ways to introduce media types on the page:
1. Introduction of the link Method
<Link rel = "stylesheet" type = "text/css" href = "../css/print.css" media = "print"/>
2. xml Method Introduction
<? Xml-stylesheet rel = "stylesheet" media = "screen" href = "css/style.css"?>
3. @ import
There are two ways to introduce @ import. One is to use @ import to call another style file in the style file; another method is to <style>... </style>, the use of this method alone is not supported in the ie6-7, such
In the style file, call another style file:
@ Import url ("css/reset.css") screen;
@ Import url ("css/print.css") print;
In <Head>
<Style type = "text/css">
@ Import url ("css/style.css") all;
</Style>
</Head>
4. @ media introduction
This method is the same as @ imporr, and there are two ways:
Use the following in a style file:
@ Media screen {
Selector {
Attribute: attribute value;
}
}
In <Head>
<Style type = "text/css">
@ Media screen {
Selector {
Attribute: attribute value;
}
}
</Style>
</Head>
The preceding methods have their own advantages and disadvantages. in actual application, I suggest the first and fourth methods, because these two methods are commonly used in project production, I will not talk about the specific differences between them. If you want to know about them, you can go to du Niang or G dad,
They can help you solve the problem.
2. Media Query)
As mentioned above, Media Query is an enhanced version of Media Type in CSS3. In fact, you can regard Media Query as Media Type (Judgment condition) + CSS (conforming style rules ), there are 13 common features listed by w3c.
For details, see Media features. To better understand Media Query, we will return to the previous instance:
<Link rel = "stylesheet" media = "screen and (max-width: 600px)" href = "small.css"/>
The method for converting to css 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 braces of @ 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.
Common Media queries are shown in the following table:
Compatible browsers:
Let's take a look at the specific use of Media Queries.
I. Max Width
<Link rel = "stylesheet" media = "screen and (max-width: 600px)" href = "small.css" type = "text/css"/>
The above indicates that when the screen is smaller than or equal to px, the small.css style is used to render the Web page.
Ii. Min Width
<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.
3. Use 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, 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.
Iv. Device screen output Width Device Width
<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.
5. iPhone 4
<Link rel = "stylesheet" media = "only screen and (-webkit-min-device-pixel-ratio: 2) "type =" text/css "href =" iphone4.css "/>
The above style is specifically for iPhone 4 mobile devices.
Vi. iPad
<Link rel = "stylesheet" media = "all and (orientation: portrait)" href = "portrait.css" type = "text/css"/>
<Link rel = "stylesheet" media = "all and (orientation: landscape)" href = "landscape.css" type = "text/css"/>
In most cases, Safari on the mobile device iPad is the same as Safari on the iPhone, but the difference is that the iPad declares different directions, for example, the example of a notebook, rendering the page in the vertical (portrait(port;
In the horizontal (landscape( landscape.css to dye the page.
VII. android
/* 240px width */
<Link rel = "stylesheet" media = "only screen and (max-device-width: 240px)" href = "android240.css" type = "text/css"/>
/* 360px width */
<Link rel = "stylesheet" media = "only screen and (min-device-width: 241px) and (max-device-width: 360px) "href =" android360.css "type =" text/css "/>
/* Width of 480px */
<Link rel = "stylesheet" media = "only screen and (min-device-width: 361px) and (max-device-width: 480px) "href =" android480.css "type =" text/css "/>
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.
8. not keywords
<Link rel = "stylesheet" media = "not print and (max-width: pixel px)" 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.
9. 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, the Media Type device is supported, so that the style will not be read,
Because it first reads only instead of screen, and does not support Media Qqueries browsers, whether or not only is supported, style will not be used.
10. 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.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
