Home > Developer > Web Develop
Media Queries literal translation comes to be "medium query", in our normal Web page in the head section often see such a piece of code:
<Linkhref="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 such a form:
<type=media="screen" >@url (</style>
I don't know if you're aware of it. There are two ways to introduce CSS styles that have a common attribute "media", and this "media" is used to specify specific media types, in HTML4 and CSS2 you can use "media" to specify a specific media type, such as screen and print style sheets, and of course other, such as "TV", "handheld", etc., where "all" means that all media media is supported. For more media types, you can click here.
The above briefly said HTML4 and CSS2 's "Media Queries", and today's main is to learn the CSS3 of "media Queries" more ways to use and related knowledge, the following we began to enter today's theme. Media queries in CSS3 has added a lot of press queries, and you can add expressions of different media types to check if the media meets certain conditions, and if the media meets the appropriate criteria, the corresponding style sheet is called. In other words, "in CSS3 we can set different types of media conditions, and according to the corresponding conditions, to the corresponding conditional media call corresponding style sheet." Now, one of the most common examples, you can set a different style sheet for both the PC's big screen and the mobile device. This feature is very powerful and allows you to customize different resolutions and devices and, without changing the content, allows your Web pages to appear normal under different resolutions and devices without losing the style.
Let's start with a simple example:
<rel=media=href="small.css"/>
The media statement above represents: When the page width is less than or equal to 600px, call the SMALL.CSS style sheet to render your Web page. First look at what the media statement contains:
1,screen: This needless to say that we all know, refers to a type of media;
2,and: is called keywords, and similar to the not,only, will be introduced later;
3,(max-width:600px): This is the media characteristics, the popular point is that the media conditions.
The previous simple example leads to two conceptual things, one being the media type and media Query, first to understand the two concepts together:
One, media type
Media type is a common attribute in Css2 and is a very useful property that can be used to assign different styles to different devices through the media type, and in CSS2 we often encounter all (full), screen, Print (page print or hit Qiu preview mode), in fact, there are more than three types of media type, the total list of 10 media types.
There are also several ways to introduce media types in the page:
1, link method introduced
<rel=type=href=media="print"/>
2, the introduction of XML method
<?xml-stylesheet rel= "stylesheet" media= "screen" href= "Css/style.css"? >
3. Introduction of @import method
@import introduced in two ways, one is to call a style file through @import in the style file, and the other way is to introduce it in <style>...</style> in
Another style file is called in the style file:
@url ("css/reset.css") screen; @URL ("css/print.css") print; Called in <style>...</style> in
<head> <type="text/css" >@url (</</head>
4, @media introduced
This type of introduction is the same as @import, and there are two ways:
Used in style files:
@Media screen{ selector { Property: property value; } } Called in <style>...</style> in
<head> <type="text/css" >@Media screen{selector </</Head > The above several methods have their own pros and cons, in the practical application I suggest the use of the first and fourth, because these two methods are in the project is commonly used in the production of methods, for their specific differences, I do not say, want to know the people can go to find degrees Niang or G dad, they can help you solve.
Second, media features (medium Query)
As mentioned earlier, media query is an enhanced version of media type CSS3, in fact, you can think of media query as a media type (judging condition) +CSS (conditional style rules), commonly used features are listed in 13. Refer to: Media features for more details. To get a better understanding of media Query, we go back to the previous instance:
<rel=media=href="small.css"/>
The syntax for converting to CSS is:
@600px) { { attribute: property value; } } In fact, the style in the Small.css file is placed in the @media Srceen and (max-width;600px) {...} Curly braces. In the statement structure above the statement, you can see that the media query and CSS Properties collection are similar, the main differences are:
1, Media query accepts only a single logical expression as its value, or no value;
2. CSS properties are used to declare how the page information is represented, and media query is an expression that determines whether the output device satisfies a certain condition;
3. Media query Most of these accept the Min/max prefix, which is used to represent their logical relationship, and to indicate a condition that is greater than or equal to or less than or equal to a value
4, CSS properties require that property values must be, Media query can have no value, because its expression returns only true or False two
Common Media Query is shown in the following table:
Compatible Browsers:
Let's take a look at the specific use of media queries
One, max width max
<rel=media=href=type="text/css"/>
The above indicates that when the screen is less than or equal to 600px, the Web page is rendered in the Small.css style.
Second, min width min
<rel=media=href=type="text/css"/>
The above indicates that when the screen is greater than or equal to 900px, the Web page is rendered in the Big.css style.
Three, multiple media queries use
<rel=media=href=type="text/css"/>
Media query can combine multiple media queries, in other words, a media query can contain between 0 and more expressions, and the expression can contain between 0 and more keywords, as well as a media Type. As it says above, when the screen is between 600px-900px, the STYLE.CSS style is used to render the Web page.
Iv. output width of device screen
<rel=media=href=type="text/css"/>
The above code refers to the IPHONE.CSS style for the maximum device width of 480px, such as the display on the iphone, where Max-device-width refers to the actual resolution of the device, that is, the visual area resolution
Wu, IPhone4
<rel=media=type=href="iphone4.css"/>
The above style is written specifically for IPhone4 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" span class= "attribute" >type= "Text/css"/>
In the case of large numbers, the mobile device on the ipad is the same as on the iphone, but the difference is that the ipad declares a different direction, such as the above example, in Portrait (portrait) Use PORTRAIT.CSS to render the page, and use LANDSCAPE.CSS to render the page in landscape (landscape).
Vii. Android
Width of/*240px */<LinkRel="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 the screen resolution can be resolved differently for Android phone page refactoring issues.
Eight, not keyword
<rel=media=href=type="text/css"/>
The NOT keyword is used to exclude a certain type of media, in other words, to exclude devices that match an expression.
Nine, only keyword
<rel=media=href=type="text/css"/>
Only used to set a specific media type that can be used to exclude browsers that do not support media queries. In fact, only many times it is used to hide style sheets for devices that do not support media query but support media type. The main features are: devices that support media Queries, the normal invocation style, when only does not exist, and for devices that do not support media features (media Queries) but that support the medium type, which will not read the style, Because its first reads only instead of screen, and the browser does not support media qqueries, the style will not be adopted, whether or not it supports only.
X. Other
If media Type is not explicitly specified in media query, it defaults to all, such as:
<rel=media=href=type="text/css"/>
There is also a comma (,) that is used to denote a juxtaposition or representation or, as follows
<rel=type=href=media="handheld and (max-width:480px), screen and (min-width:960px)"/ >
The style.css style in the code above is used on a handheld device with a width less than or equal to 480px, or on a device with a screen width greater than or equal to 960px.
The section on the use of Media query is described here, and in the end the overall regulation of its function, the personal think is a word:Media queries can use different styles under different conditions, use the page to achieve different rendering effect. the next section will introduce several instances of media queries, and if interested friends remember to watch this site update.
CSS3 Media Queries (ext. 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
