Home > Industries > Media
Media queriesThe literal translation is "Media query", which is often seen in the head section on our daily web pages.Code:
<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 can use "Media" to specify a specific media type, such as screen and Print Style sheets. Of course, there are others, for example, "TV" and "handheld", where "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 not to mention that everyone knows that it refers to a media type;
2,And: It is called a keyword. Similar words include 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. One isMedia type)AndMedia 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 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>
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 {property: property value ;}}
In
<Head> <style type = "text/CSS"> @ media screen {selector {attribute: attribute value; }}</style>
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 find du Niang or G dad. They can help you solve them.
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 QuerySee 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 "/>
To render 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 "/>/* 480px width */<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, 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.
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. Finally, the general rule introduces its function. I personally think it is a sentence:Media queries can use different styles under different conditions and use pages for different rendering effects.The next section will introduce several instances for media queries. If you are interested, remember to watch the updates on this site.
Source:W3cplus
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
