响应式网站设计标准查询规范速查收集宝典

响应式网站设计清单
响应式网页自适应的效果展示
清单 1. 基本媒体查询代码
 
body {
background-color: grey;
}
@media screen and (max-width: 960px) {
body {
background-color: red;
}
}
@media screen and (max-width: 768px) {
body {
background-color: orange;
}
}
@media screen and (max-width: 550px) {
body {
background-color: yellow;
}
}
@media screen and (max-width: 320px) {
body {
background-color: green;
}
}
目前 Firefox 3.6+、Safari 4+、Chrome 4+、Opera 9.5+、iOS Safari 3.2+、Opera Mobile 10+、Android 2.1,IE9+ 都支持媒体查询。

来源地址:https://www.ibm.com/developerworks/cn/web/1506_zhangqun_responsiveweb/index.html