How to use CSS3 Media Finder

In recent years, with the development of responsive layout, a development of multiple use, adaptive screen responsive web site needs more and more. But how do you make your website adapt to the screen? Here you need to mention a CSS3 inside the new technology-media Media Finder.

So what is Media finder?

Media Finder is a new technology for CSS3 to detect the screen resolution of a terminal that opens a website.

The Media Finder is used in the following ways:

1. Set a meta tag such as:

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

Explanation of relevant parameters:

Device-width: defines the screen visible width of the output device.

　　Device-height: defines the screen visibility height of the output device.

width = device-width : width equals the width of the current device.

Initial-scale : The initial zoom ratio (the default is set to 1.0).

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

Maximum-scale : The maximum scale that the user is allowed to zoom to (the default setting is 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).

2. Load compatible files JS

Why load compatible files JS?

Because the kernel above IE8 is incompatible with HTML5 and CSS3 media. So we need to load two compatible files so that our code can be implemented.

1 <!--[if Lt IE 9]>2 <script src= "Https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js" ></script >3      <script src= "Https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js" ></script>4 <![ Endif]-->

You can also download html5hiv.js and RESPOND,JS only need to modify the corresponding script in the use of the SRC path is OK.

3. Adjust the rendering mode of IE to the highest. Idle in most of the IE is more than 9 version, this version of the IE document mode is not up-to-date, or a lot of small partners do not pay attention to this, so you can use the following code implementation to maintain the latest version of IE's document mode:

1 <meta http-equiv= "x-ua-compatible" content= "Ie=edge" >

The second method:

1 <meta http-equiv= "x-ua-compatible" content= "ie=edge,chrome=1" >

Install a Google Chrome frame this Google Chrome plugin. This allows all browsers to use the Webkit engine and V8 engine for typesetting and operation, if the plugin is not installed, the above code will make the browser one of the highest document mode to show the effect.

Standard notation for CSS3 media:

For example, when the page is less than 960px, execute the CSS code below it.

1 @media screen and (max-width:960px) {3     body{5         background: #000; 7      }9}

There is a screen in this code, which means to tell the device to use a serif font when printing a page.

CSS2 Media usage

In fact, it is not only CSS3 to support media usage, as early as CSS2 began to support media, the specific use is to insert the following code in the head tag of the HTML page:

1 <link rel= "stylesheet" type= "text/css" media= "screen" href= "Style.css" >

Want to know whether the mobile device is not vertically placed display, you can write:

1 <link rel= "stylesheet" type= "text/css" media= "screen and (orientation:portrait)" href= "Style.css" >

The first paragraph of code is also implemented with CSS2, which allows the page width to be less than 960 to execute the specified style file:

1 <link rel= "stylesheet" type= "text/css" media= "screen and (max-width:960px)" href= "Style.css" >

However, this method increases the number of HTTP accesses. So using CSS3 to write all the CSS together is the most OK.

Ok, now we go back to CSS3 's media usage above, the CSS3 of the writing screen width is less than 960px of the size of the wording, now we write a method equal to 960px:

1 @media screen and (max-width-device:960px) {2 3 body{4 5        background:blue;6 7}8 9}

The width is greater than 960px notation:

1 @media screen and (min-width:960px) {2 3        body{4 5               background:red;6 7}8 9}

The front is commonly used in several ways, the next CSS3 media to do a summary:

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.

Finally, attach a fun demo end:

1 <! DOCTYPE html> 2 
How to use CSS3 Media Finder