Using @media screen to realize the self-adaptation of Web page layout

Pros: No plugins and phone themes, friendly to mobile devices, adaptable to various window sizes. simply add the @media screen property to the CSS, judging by the browser width and outputting different length and width values

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:

1. <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: Widths equal to the width of the current device

• Height = device-height: Highly equal to the height 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:

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]-->

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:

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

(If you want to use a fixed version of IE, you can write: <meta http-equiv= "x-ua-compatible" content= "IE=EMULATEIE9" >)

But I recently found a more power-giving notation:

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

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:

1. <link rel= "stylesheet" type= "text/css" Media= "screen" href= "style. css">

The above is actually the CSS2 implementation of the liner usage, that CSS2 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:

1. <link rel= "stylesheet" type= "text/css" Media= "screen and (orientation:p ortrait)" href = "style. css">

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:

1. <link rel= "stylesheet" type= "text/css" Media= "screen and (Max-width: 960px)" href = "style. css">

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.

Note the order, and if you write @media (min-width:768px) down there, it's tragic.

@media (min-width:1200) {//>=1200 device}

@media (min-width:992px) {//>=992 device}

@media (min-width:768px) {//>=768 device}

Because if it is 1440, because of 1440>768 then your 1200 will fail.

So when we use the min-width, the small placed above the big in the following, similarly if is with Max-width so is big in above, small in below

@media (max-width:1199) {//<=1199 device}

@media (max-width:991px) {//<=991 device}

@media (max-width:767px) {//<=768 device}

1280 above resolution (greater than 1200px)

@media screen and (min-width:1200px) {    #page {width:1100px;} #content,. div1{width:730px;} #secondary {width:310px}}

1100 resolution (greater than 960px, less than 1199px)

@media screen and (min-width:960px) and (max-width:1199px) {    #page {width:960px;} #content,. div1{width:650px;} #secondary {width:250px}select{max-width:200px}}

880 resolution (greater than 768px, less than 959px)

@media screen and (min-width:768px) and (max-width:959px) {    #page {width:900px;} #content,. div1{width:620px;} #secondary {width:220px}select{max-width:180px}}

720 resolution (greater than 480px, less than 767PX)

@media only screen and (min-width:480px) and (max-width:767px) {    #page {width:450px;} #content,. div1{width:420px;position:relative;} #secondary {Display:none} #access {width:450px;} #access a {padding-right:5px} #access a img{display:none} #rss {Display:none} #branding #s {Display:none}}

440 below resolution (less than 479PX)

@media only screen and (max-width:479px) {    #page {width:300px;} #content,. div1{width:300px;} #secondary {Display:none} #access {width:330px;} #access a {padding-right:10px;padding-left:10px} #access a Img{display : none} #rss {Display:none} #branding #s {display:none} #access ul ul a{width:100px}}

1. / * Vertical screen * /
2. @Media screen and (orientation:portrait) and (max-width: 720px) {corresponding style}
4. / * Horizontal screen * /
5. @Media screen and (orientation:landscape) {corresponding style}

The code above uses screen, which means to tell the device to use a serif font when printing a page, and a sans serif font when it is displayed onscreen. But at the moment I find that many websites omit screen directly, because your site may not need to consider when users go to print.

PC end sorted by screen width (mainstream orange)

Resolution Scale | Equipment size

1024*500 (8.9 inch)
1024x768 (ratio 4:3 | 10.4-inch, 12.1-inch, 14.1-inch, 15-inch; ）
1280*800 (16:10 |15.4 inch)
1280*1024 (Scale: 5:4 | 14.1 ", 15.0")
1280*854 (scale: 15:10 | 15.2)
1366*768 (scale: 16:9 | uncommon)
1440*900 (16:10 17 inch only for apples)
1440*1050 (Scale: 5:4 | 14.1 ", 15.0")
1600*1024 (14:9 uncommon)
1600*1200 (4:3 | 15, 16.1)
1680*1050 (16:10 | 15.4 ", 20.0")
1920*1200 (23 inch)

Through the above computer screen and size of the example table we got a few widths
1024 1280 1366 1440 1680 1920

CSS Code

@media (min-width:1024px) {
BODY{FONT-SIZE:18PX}
}/*>=1024 's Device */
@media (min-width:1100px) {
body{font-size:20px}
}/*>=1024 's Device */
@media (min-width:1280px) {
body{font-size:22px;}
}
@media (min-width:1366px) {
body{font-size:24px;}
}
@media (min-width:1440px) {
body{font-size:25px!important;}
}
@media (min-width:1680px) {
body{font-size:28px;}
}
@media (min-width:1920px) {
body{font-size:33px;}
}

Reprinted from: http://www.cnblogs.com/xcxc/p/4531846.html

Http://www.cnblogs.com/zhaodifont/p/3858657.html

Http://www.bubuko.com/infodetail-1045273.html

50777116

Using @media screen to realize the self-adaptation of Web page layout