Media Finder Usage Summary

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.