了解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样式。
备注:本篇文章由加网编辑原创内容,转载请注明出处:转自
加网