pc端和移动端共用一套代码
1. 允许网页宽度自动调整
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
2. 不使用绝对宽度
3. 相对大小的字体
- 字体也不能使用绝对大小（px），而只能使用相对大小（em）
body {
font:normal100%Helvetica,Arial,sans-serif;
}
- 上面的代码指定，字体大小是页面默认大小的100%，即16像素
h1{
font-size:1.5em;
}
- 然后，h1的大小是默认大小的1.5倍，即24像素（24/16=1.5）
small{
font-size:0.875em;
}
- small元素的大小是默认大小的0.875倍，即14像素（14/16=0.875）
4. 流动布局fluidgrid
.main{
float:right;
width:70%;
}
.leftBar{
float:left;
width:25%;
}
5. 选择加载CSS
6. CSS的@media规则
// 屏幕宽度小于400像素
@mediascreenand(max-device-width:400px){
.column{
float:none;
width:auto;
}
#sidebar{
display:none;
}
}
7. 图片的自适应（fluidimage）
addLoadEvent(function(){
varimgs=document.getElementById(“content”).getElementsByTagName(“img”);
imgSizer.collate(imgs);
});