1、meta标签
大多数移动浏览器将HTML页面放大为宽的视图（viewport）以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。在标签里加入这个meta标签
< meta name="viewport" content="width=device-width, initial-scale=1.0" >
IE8或者更早的浏览器并不支持Media Query。你可以使用media-queries.js或者respond.js来为IE添加Media Query支持
< !--[if lt IE 9]>
< script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js">
< ![endif]-->
2、css
当视图宽度为小于等于980像素时，如下规则将会生效。基本上，我会将所有的容器宽度从像素值设置为百分比以使得容器大小自适应。
/ * for 980px or less */
@media screen and (max-width: 980px) {
#pagewarp {
width:94%;
}
#content {
width:65%;
}
#sidebar {
width:30%;
}
}
然后为小于等于700像素的视图指定#content和#sidebar的宽度为自适应并且清除浮动，使得这些容器按全宽度显示。
/ * for 700px or less */
@media screen and (max-width: 700px) {
#content {
width:auto;
float:none;
}
#sidebar {
width:auto;
float:none;
}
}
对于小于等于480像素（手机屏幕）的情况，将#header元素的高度设置为自适应，将h1的字体大小修改为24像素并隐藏侧边栏。
/ * for 480px or less */
@media screen and (max-width: 480px) {
#header {
height:auto;
}
h1 {
font-size:24px;
}
#sidebar {
display:none;
}
}
响应式网站代码收集整理