标签：
一、测试工具：1.Chrome 2.Opera Mobile
二、分辨率：一般现代手机最小320px，最大640px。
三、
全屏流体设计：
1.腾讯新闻：http://xw.qq.com/
2.途牛旅游：http://m.tuniu.com/
固屏类流体设计
1.京东商城：http://m.jd.com/
2.淘宝网：http://m.taobao.com/（全屏+固屏，导航一般用全屏）
四、<meta>标签，放在<head>之间
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-
scale=1.0,user-scalable=no">
name="viewport" //窗口设定
width=device-width //页面大小屏幕等宽
initial-scale=1.0 //初始缩放比例，1.0 表示原始比例大小
minimum-scale=1.0 //允许缩放的最小比例
maximum-scale=1.0 //允许缩放的最大比例
user-scalable=no //用户是否可以缩放，这里 no 表示不可以
五、rem
网页默认字体大小为16px，如果想设置为10px，用百分比则为10/16*100%=62.5%，所以在html中设置字体大小为
62.5%，即10px，那么下面的其它元素都用rem作为单位，那么10px就是1rem，14px就是14*1/10=1.4rem。
同理，如果里面一个p的字体大小想设置为24px，那么2.4rem。
兼容性：IE9+，以及现代主流浏览器。
六、图片自适应：
img{display:block;max-width:100%;}
七、字体自适应：（媒体查询）
/*媒体查询，大于480小于640*/
@media (min-width: 480px) and (max-width: 640px) {
#tour h2 {
font-size: .26rem;
}
}
/*媒体查询，大于320小于 480*/
@media (max-width: 480px) {
#tour h2 {
font-size: .18rem;
}
}
八、box-sizing属性（当给一个区块设置padding值时，区块的宽高可以保持不变）
div{box-sizing:border-box;}
标签：
原文地址：http://www.cnblogs.com/annie211/p/5954892.html
