The first step: in the head of the page code, add a line viewport meta tag
<meta name= "viewport" content= "width=device-width, initial-scale=1"/>
Viewport is the default width and height of the Web page,
The above line of code means that the width of the Web page is equal to the screen width by default (width=device-width).
The original scaling ratio (initial-scale=1) is 1.0, which is the initial size of the Web page, which occupies 100% of the screen area.
All major browsers support this setting, including IE9. For those older browsers (mostly IE6, 7, 8), you need to use the Css3-mediaqueries.js
<!--[if Lt IE 9]>
<script src= "http://css3-mediaqueries-js.googlecode.com/svn/trunk/ Css3-mediaqueries.js "></script>
<![ Endif]-->
Step Two: (note) do not use absolute width, font size
Width:auto; /width:xx%;
Step three: (note) Font size
Font size is 100% of the page's default size, or 16 pixels
Font do not use absolute size "PX", to use relative size "REM"
html{font-size:62.5%;}
Body {font:normal 100% arial,sans-serif;font-size:14px; font-size:1.4rem;}
Fourth Step: Mobile layout
The meaning of "flow layout" is that the position of each block is floating, not fixed.
. left{width:30% Float:left}
right{width:70%; float:right;}
The advantage is that if the width is too small to fit two elements, the following elements will automatically scroll below the front element, not in the horizontal direction overflow (overflow), to avoid the appearance of the horizontal scroll bar
Fifth step: choose to load CSS
The core of adaptive web design is the media query module introduced by CSS3. Automatically probe screen width, and then load the corresponding CSS file
<link rel= "stylesheet" type= "text/css" media= "screen and (max-device-width:600px)" href= "style/css/
Css600.css "/>
The code above means that if the screen width is less than 600 pixels (max-device-width:600px), the Css600.css file is loaded.
Load the Css600-980.css file if the screen width is between 600 and 980 pixels
<link rel= "stylesheet" type= "text/css" media= "screen and (min-width:600px) and (max-device-width:980px)"
href= "Css600-980.css"/>
Other (not recommended): In addition to using HTML tags to load CSS files, you can also load in an existing CSS file
@import url ("css600.css") screen and (max-device-width:600px);
Sixth step: CSS @media rules
@media screen and (max-device-width:400px) { . left{Float:none}}
When the screen is less than 400, left cancels the float
Seventh step: Self-adaptation of the picture
Adaptive Web design must also implement automatic scaling of pictures.
IMG, object {max-width:100%;}
Older versions of IE do not support max-width, so they have to write:
img {width:100%;}
Image distortion may occur when the Windows platform scales pictures. At this point, you can try using IE's proprietary command
img {width:100%;-ms-interpolation-mode:bicubic;}
or use Js--imgsizer.js
Addloadevent (function () {
var IMGs = document.getElementById ("content"). getElementsByTagName ("img");
Imgsizer.collate (IMGs);
});
Note: If you have the condition, it is best to load different resolution pictures according to the different size of the screen.
Simple operation:
<style type= "Text/css" > img{max-width:100%;} video{max-width:100%; Height:auto} header ul li{Float:left Tyle:none; List-style-type:none;
margin-right:10px;}
Header Select{display:none} @media (max-width:960px) {header ul{Display:none;}
Header select{Display:inline-block;} </style> <body>