CSS3 media query summary and CSS3 media Summary

CSS3 media query summary and CSS3 media Summary

1. What is media query?

Media queries allow us to set CSS styles based on the characteristics of a device's display (such as the display width, screen ratio, and device direction, A media query consists of a media type and one or more conditional expressions that detect media features. Media queries can be used to detect media features such as width, height, and color ). Media queries allow you to customize display effects for specific output devices without changing the page content.

 

2. Why does the responsive design require media queries?
If you do not have a CSS3 media query module, you cannot set a specific CSS style for device features (such as the browser width ).

 

3. How to introduce media queries to CSS files

The media query is written at the end of the CSS style code. CSS is a stacked style sheet. In the same particularity, the back style overlaps the front style.

4,How to use media

Preparation 1: Set Meta tags

First, we need to set the following code when using Media to ensure compatibility with the display effects of mobile devices:

Several parameters of this Code are described as follows:

• Width = device-width:The width is equal to the width of the current device.

• Initial-scale:Initial scaling ratio (1.0 by default)

• Minimum-scale:Minimum scale allowed by users (1.0 by default)

• Maximum-scale:Maximum scale allowed by users (1.0 by default)

• User-scalable:Whether the user can manually zoom in or out (the default value is no, because we do not want the user to zoom in or out the page)

 

Preparation 2: loading compatible file JS

Because IE8 neither supports HTML5 nor CSS3 Media, we need to load two JS files to ensure the compatibility of our code:

 

Preparation 3: Set the IE rendering mode to the highest by default (this part can be added or not added)

Many people have upgraded their ie browsers to IE9 or above, so there are a lot of strange things happening at this time. For example, they are now IE9 browsers, however, the document mode of the browser is IE8:

To prevent this situation, we need the following code to make the IE document mode always up-to-date:

This code is followed byChrome = 1, ThisGoogle Chrome Frame (Google embedded browser framework GCF)If the chrome plug-in is installed on some users' computers, you can use IE in any version of the computer.WebkitEngine andV8Engine layout and computation are incredibly powerful. However, if you do not install this plug-in, this code will make IE display the results in the highest document mode. I suggest you use this code, but you can use it without it.

II,How to Write CSS responsive media queries in a CSS file

For example, change the width based on the style

HTML:

<Ul> <li> John Doe </li> <li> Mary Moe </li> <li> Amanda Panda </li> </ul> CSS: // The width is less than 500 pixels@ Media screen and (max-width: 500px) {ul> li {background: blue; color: # fff; font-size: 12px ;}} //-Pixels in width@ Media screen and (max-width: 700px) and (min-width: 501px) {ul> li {background: goldenrod; color: #000; font-size: 16px ;}} // The width is-pixels.@ Media screen and (max-width: 1000px) and (min-width: 701px) {ul> li {background: plum; color: #000; font-size: 20px ;}} // The width is greater than 1000 pixels.@ Media screen and (min-width: 1001px) {ul> li {background: violet; color: #333; font-size: 22px ;}// style ends
In a word, @ media has three main points: 1, meta tag; 2, compatible with IE; 3, @ media screen and (max-width: 980px) {}( sample style)