HTML5----responsive (self-adapting) Web design

Now, many projects need to do responsive or adaptive to adapt to our different screen size of mobile phones, computers and other devices, then we need to work on the page, I would like to say how to do responsive (adaptive) Web design

1, in the head of the page code, add a row viewport meta tag

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

In the

1) Width=device-width: Indicates width is the width of the device screen

2) initial-scale=1.0: Indicates the initial scaling ratio, 1.0 is the 100% of the page

3) minimum-scale=1.0: Indicates the minimum zoom ratio

4) maximum-scale=1.0: Indicates the maximum zoom ratio

5) User-scalable=no: Indicates whether the user can adjust the zoom ratio

If you want to be compatible with IE6/7/8, you need to use Css3-mediaqueries.js

<!--[if Lt IE 9]>  <script src= "http://css3-mediaqueries-js.googlecode.com/svn/trunk/ Css3-mediaqueries.js "></script>  

2, the width do not use absolute

Width:auto; /width:xx%;

3, font size is the default size of the page 100%, that is 16 pixels, do not use the absolute size "PX", to use the relative size "rem"

html{font-size:62.5%;} Body {font:normal 100% arial,sans-serif;font-size:14px; font-size:1.4rem;}  

　　

4, the flow layout, "flow layout" means that the location of each block is floating, not fixed

. left{width:30%; Float:left}  . right{width:70%; float:right;}

Like this, with left float and right float, the advantage is that if the width is too small, no more than two elements, the following elements will automatically scroll to the front of the element below, not in the horizontal direction overflow (overflow), avoid the appearance of horizontal scroll bar

5. Select Load CSS

The core of "adaptive web Design" is the media query module introduced by CSS3. Automatically detects screen width and then loads the appropriate CSS file

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

This code means: if the screen width is less than 600 pixels (max-device-width:600px), the Css600.css file is loaded.

If the screen width is between 600 pixels to 980 pixels, the Css600-980.css file is loaded

<link rel= "stylesheet" type= "text/css" media= "screen and (min-width:600px) and (max-device-width:980px)" href= " Css600-980.css "/>  

Also (deprecated): In addition to loading CSS files with HTML tags, you can also load them in an existing CSS file

@import url ("css600.css") screen and (max-device-width:600px);  

　　

6, CSS @media rules (if necessary to write)

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

When the screen width is less than 400px, the float is canceled

7, the image Adaptive, "Adaptive web Design" must also realize the automatic scaling of the picture.

img {width:100%;}  

Image distortion may occur when the Windows platform scales pictures. At this point, you can try to use IE's proprietary commands

img {width:100%;-ms-interpolation-mode:bicubic;}  

or use Js--imgsizer.js

Addloadevent (function () {  var IMGs = document.getElementById ("content"). getElementsByTagName ("img");  Imgsizer.collate (IMGs);  

　　

Well, this page will be self-adapting!

HTML5----responsive (self-adapting) Web design