手机端页面必须放上这句话：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">
可视区域的宽度，值可为数字或关键词device-width。
intial-scale:页面首次被显示时可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放。
maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别
maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable:用户是否可以手动缩放，no 禁止缩放。
这段代码支持Chrome、Firefox、IE9以上的浏览器，但不支持IE8以及低于IE8的浏览器；
手机页面一般不用固定的宽度都是用的百分比或者auto;
字体也不能使用绝对大小（px），而只能使用相对大小（em）。(但是本人习惯用px)
<link rel="stylesheet" type="text/css" media="screen and (max-device- 400px)" href="tinyScreen.css" />如果屏幕宽度小于400像素（max-device- 400px），就加载tinyScreen.css文件
<link rel="stylesheet" type="text/css" media="screen and (min- 400px) and (max-device- 600px)" href="smallScreen.css" />如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。
除了用html标签加载CSS文件，还可以在现有CSS文件中加载。@import url("tinyScreen.css") screen and (max-device- 400px);
但是一般是写在css里面@media screen and (max-device- 400px) {.contant{100%; } }
图片的自适应：img { max- 100%;}但是ie浏览器不支持max-width所以最好写成img{100%}再windows中图片容易失真可以使用img { image-rendering: optimizeQuality; /* Firefox 3.6+; default behavior is identical, no need to specify */
-ms-interpolation-mode: bicubic; /* Internet Explorer 7.0; default in IE8+ */}但是正常情况下使用img{width：100%;}就可以满足需求