CSS3 Media Queries Detailed introduction and use method

Media Queries is to support CSS3 browser in order to work properly, IE8 the following is not supported. Media Queries can be used in a variety of ways, to be applied to what kind of device, it is possible to define their own.

What is Media Queries? In general, in the development of HTML + CSS Web pages, there will be a CSS to control the page style sheet. And with a variety of different size, length and breadth and resolution of the emergence of devices, we are in the development of the Web page only to consider how the screen display, how superficial. So, the Web page that you see on the developer's screen may be beautiful, so what about the other people's screens? So what we need is the ability to control the different size of the screen (device), the style shown on it, so that a variety of different places from the user can have the best browsing experience.

In foreign countries have a website dedicated to collecting a variety of Media Queries effect, the site name is called "media queries", website: http://mediaqueri.es/. After entering the site, you will see 4 sites in each column, starting from the left is a small screen width of the mobile device, to the right is on the traditional PC's larger screen. In a traditional PC, a lot of elements will be side-by, and in the phone, it will become only one line.

Media Queries actually say simple is also very simple, you can only use the following lines of CSS, and then for different devices to set CSS properties. This paragraph will be easy to use, from the simplest, easiest, least challenging width to play.

There are two ways to use Media Queries

• In the same CSS file, use media Queries @media to determine the user's screen width and choose which CSS to load.
• In the HTML <link> loading location, use the media attribute to determine the user's device/window width and choose which CSS file to load.

The above two can be one, use the first word to write several times <link> tags, the other one to write in the same CSS file several times @media. The same effect, choose the way you like. (The framework of the network is the 1th kind, such as Bootstrap.) ）

@media to be judged by width

The following syntax is the most commonly used media Queries: (The contents of the same file below)

{    //If the window width >= 1200px, this CSS will be loaded. }{    //If the window width is between 768px ~ 979px, this CSS will be loaded. }{    //If the window width <= 768px, this CSS will be loaded. }{    //If the window width is <= 480px, this CSS is loaded. }

In Media Queries, we use min-width and max-width most often to determine the user's window width, while the max-device-width is the maximum width of the user's "device". Where is the width and device-width difference?

• Width: Because the browser is free to adjust the width, this refers to the width of the viewing window.
• Device-width: Even if you get the browser window to fit the maximum (small) width, it won't take effect. Because, device-width refers to the user's "device" maximum width, not the browser window. So, device-width is often used to judge the phone.

So, you can also add other conditions to go on your own. It is important to note that each condition is separated by and, with parentheses in order to avoid errors.

The min-width is the minimum width, and the max-width is the maximum width that can be used to represent a certain range.

<link> writing in the HTML of the Judgment

The syntax of the previous section, you can also separate it into several files, and then use the HTML <link> to load and judge. The following is the HTML code:

<Linkrel= "stylesheet"type= "Text/css"href= "All.css"Media= "Screen"><Linkrel= "stylesheet"type= "Text/css"href= "A.css"Media= " screenand (max-width:767px) "><Linkrel= "stylesheet"type= "Text/css"href= "B.css"Media= " screenand (min-width:768px) and (max-width:979px) "><Linkrel= "stylesheet"type= "Text/css"href= "C.css"Media= " screenand (min-width:1200px) "><Linkrel= "stylesheet"type= "Text/css"href= "D.css"Media= " screenand (max-device-width:480px) ">

We can use the Media property in link to determine the user's window/device width, as above. After that, in each CSS file you can write a CSS that matches the user's width to the criteria. such as A.css, is to write if the user's window width <= 768px, to reload the CSS.

Precautions

In the media Queries CSS, the effect is to overwrite the original preset CSS. So, you have to first have a complete CSS, and then use Medai Queries, the details of the adjustment of elements. So, definitely not to copy all the CSS over to the media Queries and then modify Oh!

Viewport

If the Web page does not do responsive web Design, the phone's browser will automatically pretend that the resolution is very large, will make the page full display. However, this makes the word very small and the user has to zoom in rather than read it directly. This meta tag is designed to prevent this from happening (the iphone is said to be the case), so that the width of the Web page is directly the width of the device and does not plug the page. This paragraph can only be added to the

<name content initial-scale/>

Set and fast use for a device: Media Query Snippets

Media Query Snippets This site collects a number of @media conditions for mobile devices that you can copy directly to use. For example, there are a bunch of devices you can take to set: (URL: http://nmsdvid.com/snippets/)

In addition, you do not need to make adjustments to every device, basically using the max-device-width:480px of the action device, is more than enough. The above site, is to help you do a tidy up, in order to rainy.

IE8 Hack

There are people on the web who have created a browser that does not support media Queries to support it through JavaScript. And now this seems to be a little bit of a problem, the actual can use please directly to the site query:

Css3-mediaqueries-js–a Library, the aims to add media query, support to non-supporting browsers

Do it

In addition, the network also has support media Queries framework, such as Bootstrap and so on. Bootstrap has helped you set up a lot of layouts in different devices, perhaps you can try to use this nice and simple framework,bootstrap. If you use the bootstrap, or does not mean that this is not necessary for you, because like bootstrap only to the pattern, the picture changes, and the details of the part, you still have to use media queries to the entire responsive Web design to do the best.

In fact, Media Queries just allows you to make adjustments on different devices, as for the adjustment of good looking, you have to see how the CSS is good, come on!

CSS3 Media Queries Detailed introduction and use method