The core CSS technology of responsive Design media (media Finder)

Summarize the use of the core CSS technology Media finder for responsive design.

<meta http-equiv= "x-ua-compatible" content= "Ie=edge" ><!--compatible ie-->
<meta name= "viewport" content= "Width=device-width, initial-scale=1" ><!--Get Media query screen width, scale--

Prepare for Work 1: Set META tags

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

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:

It's too much for the force.

But I recently found a more power-giving 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 and estimate that many people in the responsive web site CSS often see this code similar to the following:

1. @media screen and (max-width:960px) {
2. body{
3. Background: #000;
4. }
5. }

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:

1. @media (max-width:960px) {
2. body{
3. Background: #000;
4. }
5. }

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:

The above is actually the CSS2 implementation of the liner usage, that CSS3 media can only support the above one function? The answer is certainly not, he has a lot of usage.

For example, we would like to know if the mobile device is not vertically placed on the display, you can write:

We also use the first paragraph of code to implement the CSS2, so that it can make the page width less than 960 of the execution of the specified style file:

Since CSS2 can achieve this effect of CSS, why not use this method, many people should ask, but the above method, the biggest drawback is that he will increase the number of page HTTP requests, increase the burden of the page, we use CSS3 style are written in a file is the best way.

Regression CSS3 Media

We probably talked about the next CSS2 media query usage, now we go back to the CSS3 media query, in the first paragraph of the code I used is less than 960px of the size of the wording, then we can now achieve the equivalent of 960px size code:

1. @media screen and (max-device-width:960px) {
2. body{
3. background:red;
4. }
5. }

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

1. @media screen and (min-width:960px) {
2. body{
3. Background:orange;
4. }
5. }

We can also mix and use the above usage:

1. @media screen and (min-width:960px) and (max-width:1200px) {
2. body{
3. Background:yellow;
4. }
5. }

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.

The core CSS technology of responsive Design media (media Finder)