With the continuous development of science and technology, Web browsing terminals are becoming more and more diverse, and users can access your website through: Widescreen TVs, desktops, laptops, tablets and smartphones. Although you can't guarantee that a website will look exactly the same on different screen sizes and devices, at least let your Web page fit into the user's terminal, so that he can be better presented to your users. In this section, you'll learn how to use the Media queries module in CSS3 to adapt a page to a different terminal (or screen size), allowing your page to have a better experience for the user.
Media Queries
Media queries is a new module feature added to CSS3, its biggest feature is to query the media through CSS3, and then call the corresponding style. Actually this function has appeared in the CSS2.1, only then this function is not powerful, our most common is to add the printing style to the printing device. With the changing times, this module is becoming more and more powerful.
In a thorough understanding of media queries we need to understand two important parts, the first is the media type and the second is the media feature. Let's take a look at these two sections in a nutshell:
Media type
Media type is a common attribute in CSS2 and is a useful property that allows you to specify different styles for different devices through the media type.
In the CSS2 often encountered is all (full), screen, print (page printing or print preview mode), in fact, the media type far more than the three kinds, the world's total list of 10 media types. As shown in the following table:
| Value | Device type |
| All | All devices |
| Braille | Braille Tactile feedback device for the blind |
| Embossed | Braille Printers |
| Handheld | Portable Devices |
| Print paper or Print preview view | |
| Projection | Various projection devices |
| Screen | Computer monitor |
| Speech | Voice or audio synthesizer |
| Tv | TV Type Equipment |
| Tty | Media using fixed density letter grids, such as telex typewriters and terminals |
Screen , all , and Print are among the three most common media types.
In the actual media type has nearly 10 kinds of, the actual commonly used is so many, but the media type of reference method also has a variety of, common are:link tag ,@import and CSS3 new @media several:
Link method
The link method introduces the media type in fact, when the <link> tag refers to the style, the media property in the link tag is used to specify a different medium type. as shown below.
< link rel = "stylesheet" type = "Text/css" href = "Style.css" media = "screen" /> < link rel = "stylesheet" type = "Text/css" href = "Print.css" media = "Print" />
@import method
@import can reference a style file and can also be used to reference a media type. There are two main ways @import introduce media types, one is to call another style file in a style through @import, and the other is to use the <style></style> in the
@importurl (reset.css) screen; @importurl (print.css) print;
The media type method is introduced in the <style> tag in
< Head > < type= "Text/css"> @importurl (style.css) all; </ style > </ Head >
@media method
@media is a new feature introduced in CSS3, called Media query. This property can also be used in the page to introduce the media type. @media the introduction of media types and @import a bit similar also has two ways.
(1) Reference the media type in the style file:
{ selector {/* Your style code is written here ... */} }(2) The way to introduce media types using @media is referenced in <style> in the
<Head><styletype= "Text/css">@media Screen{Selector {/*your style code is written here ...*/}}</style></Head>
Media queries how to use
To understand these conceptual things, the students want to know how to use media queries? Let's explore how it's used:
Media queries can use different styles under different conditions to make the page different rendering results under different terminal devices. The previous section briefly describes how media queries is referenced to the project, but media queries has its own rules for using it. Specifically, Media queries is used as follows.
@media Media Type and (media properties) { your style }Note: You must use media queries to start with "@media", then specify the media type (also known as the device type), followed by the specified media characteristics (also known as device features). The way the media is written and the style is written in a very similar way, mainly divided into two parts, the first part refers to the media characteristics, the second part is the media characteristics of the specified value, and the two parts are separated by a colon. For example:
(max-width:480px)
As you can tell from the previous table, there are 10 media types and 13 media features, which are grouped in a similar way to different CSS collections. Unlike CSS properties, however, media features are judged by Min/max to represent greater than or equal to or less than a logical judgment, rather than using symbols less than (<) and greater than (>). Let's take a look at the ways media queries are used in real-world projects.
1. Max width max-width
"Max-width" is the most commonly used feature in media features, meaning that the style takes effect when the media type is less than or equal to the specified width. Such as:
@media screen and (max-width:480px) { . ads { display:none; } }The above indicates that when the screen is less than or equal to 480px, the ad block (. ads) on the page will be hidden.
2. Minimum width min-width"Min-width", in contrast to "max-width", refers to when the media type is greater than or equal to the specified width, the style takes effect.
@media screen and (min-width:900px) { . Wrapper{width: 980px;} }The above means: when the screen is greater than or equal to 900px, the width of the container ". Wrapper" is 980px.
3. Use of multiple media featuresMedia queries can use the keyword "and" to combine multiple media features. That is, a media query can contain between 0 and more expressions, and the expression can contain 0 to more keywords, as well as a media type.
When the screen is between 600px~900px, the body's background color is rendered as "#f5f5f5" as shown below.
@media screen and (min-width:600px) and (max-width:900px) { body {background-color:#f5f5f5;} }On smart devices, such as the iphone, ipad, and so on, you can also set the appropriate style (or call the appropriate style file) based on the size of the screen device. Similarly, for screen devices, you can also use the "Min/max" corresponding parameter, such as "Min-device-width" or "max-device-width".
<rel= "stylesheet" media= "screen and (max-device-width:480px)" href= "iphone.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.
5. Not keywordThe use of the keyword "not" is used to exclude a certain type of media, that is, to exclude an expression-compliant device. In other words, the NOT keyword indicates that the following expression is reversed, such as:
@media not print and (max-width:1200px) {style code}The code above indicates that the style code will be used in all devices except the print device and device width of less than 1200px.
6.only KeywordsOnly is used to specify 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. It mainly includes: the device that supports the media characteristic, the normal invocation style, when only does not exist, indicates that the media is not supported, but the media type of the device, so it will not read the style, because its first will read only instead of screen, but also does not support the media queries browser, Styles are not used, whether or not they are supported. Such as
< Linkrel = "stylesheet" Media = "only screen and (max-device-width:240px)" href = "Android240.css" />
If media Type is not explicitly specified in media query, it defaults to all, such as:
< Linkrel = "stylesheet" Media = "(min-width:701px) and (max-width:900px)" href = "Mediu.css" />
In addition, in styles, you can also use multiple statements to apply the same style to different media types and media attributes, as indicated below.
< Linkrel = "stylesheet" type = "Text/css" href = "Style.css" 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.
So far, CSS3 Media queries has been supported by a wide range of browsers, in addition to the ie6-8 Browser, which is perfectly supported in all modern browsers. There is a difference,Media queries in other browsers do not like other CSS3 properties in different browsers to add prefixes .
Mobile Web design, media type
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
