允许网页宽度自动调整
加入viewport元标签：
<meta name="viewport" content="width=device-width, initial-scale=1" />
width=device-网页宽度等于浏览器内部宽度
initial-scale=1:网页占屏幕面积的100%
让IE6-IE8兼容HTML5和CSS3
<!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <script src="js/respond.src.js"></script> <![endif]-->
不使用绝对宽度
x% ;
或者
auto;
相对大小的字体：不适用px，而是使用em
指定字体大小是页面默认大小的100%
body{
font: normal 100% Helvetica, Arial, sans-serif;
}
指定h1的大小是默认大小的1.5倍
h1{
font-size:1.5em;
}
使用流动布局：并使用float使宽度太小时后面的元素滚动到下方，避免滚动条出现
.main{
float: right;
70%;
}
.leftBar{
float: left;
25%;
}
选择加载CSS:使用媒体查询实现
探测屏幕宽度，加载相应的CSS文件。
如果屏幕宽度小于400像素（max-device- 400px），就加载tinyScreen.css文件。
<link rel="stylesheet" type="text/css"
media="screen and (max-device- 400px)"
href="tinyScreen.css" />
如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。
<link rel="stylesheet" type="text/css"
media="screen and (min- 400px) and (max-device- 600px)"
href="smallScreen.css" />
CSS内部加载：
在CSS文件内加载css文件
@import url("tinyScreen.css") screen and (max-device- 400px);
为某分辨率范围设置CSS规则
@media screen and (max-device- 400px) {
.column {
float: none;
auto;
}
#sidebar {
display:none;
}
}
图片大小相对：img{max- 100%;}