了解css媒体查询的语法
媒体查询语句如下：
body{background-color:#fff;}
@media screen and (max-width:960px){
body{background-color:#f00;}
}
@media screen and (max-width:768px){
body{background-color:#0f0;}
}
@media screen and (max-width:550px){
body{background-color:#00f;}
}
@media screen and (max-width:320px){
body{background-color:#005;}
}
在您的css最末尾加上以上的样式，就可以浏览效果了。慢慢浏览器窗口的宽度就会发现当最大宽度分别是320px、550px、768px、960px时，页面的背景色会相应的变化。既然知道了怎么来设置不同的css样式，那么整个页面的排版布局及样式都可以来分别设置了。道理是一样的，非常简单！~
这就是所谓的css媒体查询，根据视口的宽度来设置不同的css样式。
备注：本篇文章由加网编辑原创内容，转载请注明出处：转自
加网
