Media Finder Usage Summary

a set meta tag

First, we need to set up the following code when using media to be compatible with the display of mobile devices:

<meta name= "viewport" content= "Width=device-width, initial-scale=1.0, maximum-scale=1.0, User-scalable=no" >

Several parameters of this code are explained:

width = device-width: Width equals width of 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)

two hack

? 1. <!--[if LT IE 9]><script src= "Js.js" ></script><! [endif]-->

(1): Less than IE9 need to have a default class, how to add, IE9 above do not need this default class, add this class timing?

? 2. Use CSS Hack to solve

Body {

background:red;

}

/* IE6, IE7 turn green */

@media all\9 {

Body {

Background:green;

}

}

/* IE8 Turn Blue */

@media \0screen {

Body {

Background:blue;

}

}

/*IE9 and IE10 Turn YELLOW * * No need to IE9 above to support

@media screen and (min-width:0\0) {

Body {

Background:yellow; }

}

three Media all parameters Summary

width: The viewable width of the browser.

Height: Browser visual height.

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.

Four CSS3 Media width notation

When the browser size is less than 960px

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

body{

Background: #000;

}

}

When browser size equals 960px

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

body{

background:red;

}

}

When the page width is greater than 960px

@media screen and (min-width:960px) {

body{

Background:orange;

}

}

We can also mix the above usage: when the page width is greater than 960px less than 1200px when the execution of the following (this open platform will use this)

@media screen and (min-width:960px) and (max-width:1200px) {

body{

Background:yellow;

}

}

five related media inquiry case (interested can see)

1. Http://www.w3cplus.com/css3/media-queries-alistpart

2. Http://www.w3cplus.com/css3/media-queries-tee-gallery

3. Http://www.w3cplus.com/css3/media-queries-hicksdesign

If there are incomplete or better blog, welcome everyone to share, thank you!

Media Finder Usage Summary