Shulou(Shulou.com)06/03 Report--

This article introduces the knowledge of "how to use CSS3 Media Queries". In the operation of actual cases, many people will encounter such a dilemma. Next, let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Media Queries literally translates to "media query". We often see a code like this in the head section of our usual Web page:

The code is as follows:

Or something like this:

The code is as follows:

@ import url ("css/style.css")

Two of these ways to introduce CSS style have a common attribute "media", and this "media" is used to specify a specific media type, in HTML4 and CSS2 allows you to use "media" to specify a specific media type, such as screen (screen) and print (print) stylesheets, and of course, there are others, such as "TV", "handheld", etc., where "all" means to support all media. For more information about Media types, check out http://www.w3.org/TR/CSS2/media.html#media-types.

The above briefly said the "Media Queries" of HTML4 and CSS2, but today's main purpose is to learn more about the use and related knowledge of "Media Queries" in CSS3. Let's move on to today's topic. Media Queries in CSS3 adds more media queries, and you can add expressions for different media types to check whether the media meets certain conditions, and if the media meets the appropriate conditions, the corresponding stylesheet will be called. In other words, to put it simply, "in CSS3, we can set different types of media conditions, and according to the corresponding conditions, call the corresponding stylesheet to the corresponding media that meet the conditions." Now the most common example is that you can set different stylesheets for both the big screen and the mobile device of your PC. This function is very powerful, it allows you to customize different resolutions and devices, and without changing the content, so that your web pages can be displayed normally in different resolutions and devices, and will not lose the style.

First, let's look at a simple example:

The code is as follows:

The above media statement indicates that when the page width is less than or equal to 600px, call the small.css stylesheet to render your Web page. First, let's take a look at what is contained in the statement of media:

1. Screen: needless to say, it refers to a type of media.

2. And: it is called a keyword, which is similar to not,only, which will be introduced later.

3. (max-width:600px): this is the media characteristic. To put it more colloquially, it is the media condition.

The previous simple example leads to two conceptual things, one is media type (Media Type) and media feature (Media Query). First, let's understand these two concepts together:

1. Media type (Media Type)

Media type (Media Type) is not only a common attribute in css2, but also a very useful attribute. You can specify different styles for different devices by media type. In css2, we often encounter all (all), screen (screen), print (page print or Daqiu preview mode). In fact, there are more than three media types. W3C lists a total of 10 media types.

There are also several ways to introduce media types into your page:

1. Link method is introduced.

The code is as follows:

2. Xml is introduced.

The code is as follows:

3. @ import is introduced.

There are two ways to introduce @ import, one is to call another style file through @ import in the style file, and the other is in > / head >. This method of use alone is not supported in ie6-7, such as

Call another style file in the style file:

The code is as follows:

@ import url ("css/reset.css") screen

@ import url ("css/print.css") print

In > / head >... Call in:

The code is as follows:

@ import url ("css/style.css") all

4. @ media introduction

This is introduced in the same way as @ imporr, but in two ways:

Used in style files:

The code is as follows:

@ media screen {

Selector {

Attributes: attribute valu

}

}

In > / head >... Call in:

The code is as follows:

@ media screen {

Selector {

Attributes: attribute valu

}

}

All of the above methods have their own advantages and disadvantages. In practical application, I suggest using the first and fourth methods, because these two methods are commonly used in project production. I won't talk about their specific differences. if you want to know, you can go to du Niang or G Dad, they can help you solve it.

II. Media characteristics (Media Query)

As mentioned briefly earlier, Media Query is an enhanced version of CSS3 to Media Type. In fact, Media Query can be regarded as Media Type (judgment condition) + CSS (conditional style rules). There are 13 common features listed in W3C. For more information, please refer to Media features. To better understand Media Query, let's go back to the previous example:

The conversion to css is written as follows:

The code is as follows:

@ media screen and (max-width: 600px) {

Selector {

Attributes: attribute valu

}

}

In fact, the style in the small.css file is put in @ media srceen and (max-width;600px) {… In curly braces of}. In the statement structure above, you can see that the attribute sets of Media query and css are very similar, the main differences are as follows:

1. Media query accepts only a single logical expression as its value, or no value

2. The css attribute is used to declare information about how the page is represented, while Media Query is an expression used to determine whether the output device satisfies certain conditions.

3. Most of the Media Query accept the min/max prefix, which is used to express its logical relationship and to indicate that it is applied to cases greater than or equal to or less than or equal to a certain value.

4. The CSS attribute requires that there must be an attribute value, and Media Query can have no value, because its expression returns only true or false.

The commonly used Media Query is shown in the following table:

Media featuresValueApplies toAccepts min/maxwidthlengthvisual and tactile media typesyesheightlengthvisual and tactile media typesyesdevice-widthlengthvisual and tactile media typesyesdevice-heightlengthvisual and tactile media typesyesorientationportrait | landscapebitmap media typesnoaspect-ratioratiobitmap media typesyesdevice-aspect-ratioratiobitmap media typesyescolorintegervisual media typesyescolor-indexintegervisual media typesyesmonochromeintegervisual media typesyesresolutionresolutionbitmap media typesyesscanprogressive | interlace "tv" media typesnogridintegervisual and tactile media typesno

Compatible browsers:

IE6 does not support IE7, does not support IE8, does not support IE9, supports Chrome5, supports Opera10, supports Firefox3.6, supports Safari4.

III. Specific use of Media Queries

Let's take a look at the specific use of Media Queries.

3.1Max width Max Width

The code is as follows:

The above indicates that when the screen is less than or equal to 600px, the small.css style will be used to render the Web page.

3.2.Min width Min Width

The code is as follows:

What is shown above is that when the screen is greater than or equal to 900px, the big.css style will be used to render the Web page.

3.3.Using multiple Media Queries

The code is as follows:

Media Query can combine multiple media queries, in other words, a Media Query can contain 0 to more expressions, expressions can contain 0 to more keywords, and a Media Type. As shown above, the style.css style is used to render the web page when the screen is between 600px-900px.

3.4.The output width of the device screen Device Width

The code is as follows:

The above code refers to the iphone.css style applicable to the maximum device width of 480px, such as the display on iPhone, where max-device-width refers to the actual resolution of the device, that is, the visual area resolution.

3.5 、 iPhone4

The code is as follows:

The above style is written specifically for iPhone4 mobile devices.

3.6 、 iPad

The code is as follows:

In most cases, the Safari on the mobile device iPad is the same as that on the iPhone, except that they differ in that iPad declares different directions. For example, in the above example, portrait.css is used to render the page in portrait and landscape.css is used to render the page in landscape.

3.7 、 android

The code is as follows:

/ * width of 240px * /

/ * width of 360px * /

/ * width of 480px * /

We can use media query to provide specific styles for android phones at different resolutions, which can solve the problem of page reconstruction for android phones with different screen resolutions.

3.8.The not keyword

The code is as follows:

The not keyword is used to exclude certain established media types, in other words, to exclude devices that match the expression.

3.9. Only keyword

The code is as follows:

Only is used to determine a specific media type and can be used to exclude browsers that do not support media queries. Only is often used to hide stylesheets from devices that do not support Media Query but support Media Type. It mainly has: supports the media feature (Media Queries) the device, the normal call style, at this time when the only does not exist; for does not support the media feature (Media Queries) but also supports the media type (Media Type) of the device, so it will not read the style, because its first read only rather than screen; and does not support Media Qqueries browsers, regardless of whether or not support only, the style will not be adopted.

3.10. Other

If Media Type is not explicitly specified in Media Query, it defaults to all, such as:

The code is as follows:

In addition, a comma (,) is used to indicate juxtaposition or OR, as follows

The code is as follows:

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 is the end of "how to use CSS3 Media Queries". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.