@media screen and (min-width:1200px){
#page{ width: 1100px; }
在这里写当浏览器宽度最小1200px以上时的css代码
}
@media screen and (min-width: 960px) and (max-width: 1199px) {
#page{ width: 960px; }
在这里写当浏览器宽度在960 - 1199px以内时的css代码
}
@media screen and (min-width: 768px) and (max-width: 959px) {
#page{ width: 900px; }
在这里写当浏览器宽度在768 - 959px以内时的css代码
}
@media only screen and (min-width: 480px) and (max-width: 767px){
#page{ width: 450px; }
在这里写当浏览器宽度在490 - 767px以内时的css代码
}
@media only screen and (max-width: 489px) {
#page{ width: 300px; }
在这里写当浏览器宽度在489px以下时的css代码
}
响应式网页的头部必须添加，否则在手机端不会自动实现响应式布局：
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
这样才能实现响应式效果
