, in turn, check:
1. On the web & lt; Head> Add the following code to the width of the web page automatically adapt to the width of the phone's screen
<meta name="viewport" content="width=device - width, initial - scale=1.0, the minimum - scale=1.0, the maximum - scale=1.0, user - scalable=no"/& gt;
Rem, 2. Use CSS 3 units by js definition, scope of different width defined in the base of different values, the code is as follows:
(function (doc, win) {
Var docEl=doc. DocumentElement,
ResizeEvt='orientationchange' in the window? 'orientationchange' : 'the resize,
Recalc=function () {
Var clientWidth=docEl. ClientWidth;
if (! ClientWidth) return;
DocEl. Style. FontSize=20 * (clientWidth/320) + 'px'; 20 "//" according to you to set the font - the size of HTML attribute value to do the proper change
};
if (! Doc. AddEventListener) return;
Win. AddEventListener (resizeEvt recalc, false);
Doc. AddEventListener (' DOMContentLoaded recalc, false);
}) (document, window);
</script>
3. Do not use the absolute width: as the web page will adjust the layout according to the screen width, so can't use the layout of the absolute width, also cannot use have elements of absolute width, height set percentage is invalid,
4. Also can't use absolute font size (px), and can only use relative size (em/rem),
5. Flow (fluid grid layout) : CSS to add
. The main {
float: right;
Width: 70%;
}
. LeftBar {
float: left;
Width: 25%;
}
6. The application of CSS @ media rules:
@ media screen and (Max - device - width: 400 px) {
The column {
Float: none;
width:auto;
}

# sidebar {
Display: none;
}
}
The code above mean, if the screen width of less than 400 pixels, then the column block cancel floating (float: none), automatically adjust the width (width: auto), sidebar block does not display (display: none),
7. Image adaptive (fluid image) : in addition to the layout and text, "adaptive web design" also must implement the automatic scaling of the picture, that as long as a line of CSS code:
Img {Max - width: 100%; }
This line of code is also effective for most embedded web video, so can be written as:
Img, object {Max - width: 100%; }