CSS3 Media Query Usage Summary

Prepare for Work 1: Set META tags

Several parameters of this code are explained:

width = device-width: Widths equal to the width of the current device

Initial-scale: Initial zoom ratio (default = 1.0)

Minimum-scale: The minimum scale to allow the user to zoom (the default setting is 1.0)

Maximum-scale: Maximum scale allowed to be scaled by the user (default = 1.0)

User-scalable: Whether the user can zoom manually (the default is no, because we don't want the user to zoom out of the page)

Ready to work 2: Load compatible files JS

Because IE8 neither supports HTML5 nor supports CSS3 Media, we need to load two JS files to ensure that our code is compatible:

Ready to Work 3: set IE rendering to the highest by default (this section can be added or not added)

Now a lot of people's Internet Explorer has been upgraded to more than IE9, so this time there are a lot of weird things happen, such as now IE9 browser, but the browser's document mode is IE8:

To prevent this, we need the following code to keep IE's document mode always up-to-date:

There is a better notation:

How does this code add a chrome=1, this Google Chrome frame (Google embedded browser framework GCF), if some of the user's computer contains this Chrome plug-in, Can let the computer inside of IE regardless of which version of the can use WebKit engine and V8 engine for typesetting and operation, incomparable to force, but if the user did not install the plug-in, then this code will let IE in the highest document mode to show the effect. I suggest you use this code, but you don't have to.

Enter CSS3 media notation:

Let's take a look at the following code, estimated that many people in the responsive web site CSS very often see similar to the following code

@media screen and (max-width:960px) {    body{        background: #ccc;    }}

This should be considered a standard notation of media, the above CSS code means: When the page is less than 960px to execute the CSS below it. This should not be too much doubt.

Someone should find that there is a screen in the code above, which means to tell the device to use a serif font when printing a page, and a sans serif font when it is displayed. But at the moment I find a lot of sites will be directly omitted screen, because your site may not need to consider the user to print, you can write directly:

@media (max-width:960px) {    body{        background: #ccc;    }}

Then it is when the browser size is larger than the 960px time code:

@media screen and (min-width:960px) {    body{        background:orange;    }}

We can also mix and use the above usage:

@media screen and (min-width:960px) and (max-width:1200px) {    body{        background:yellow;    }}

The above code means that the following CSS is executed when the page width is greater than 960px or less than 1200px.

Media All Parameters Summary

The above is the most commonly used media finder three features, greater than, equal to, less than the wording. The full functionality of the Media Finder is definitely more than these three features, and here are some of the parameter usage explanations I summed up:

Width: The viewable width of the browser.

Height: The viewable height of the browser.

Device-width: The width of the device screen.

Device-height: The height of the device screen.

Orientation: The test equipment is currently in the horizontal or vertical state.

Aspect-ratio: Detects the scale of the browser's visible width and height. (Example: ASPECT-RATIO:16/9)

Device-aspect-ratio: Detects the ratio of the width and height of the device.

Color: detects the number of digits of the color. (ex: MIN-COLOR:32 will detect if the device has 32-bit color)

Color-index: Check the color in the Device Color Index table, his value cannot be negative.

Monochrome: Detects the number of bits per pixel in a monochrome ligustrum buffer area. (This is too high, I guess I seldom use it.)

Resolution: Detects the resolution of the screen or printer. (For example: min-resolution:300dpi or MIN-RESOLUTION:118DPCM).

Grid: Whether the device that detects the output is a grid or a bitmap device.

