7x24小时服务热线:131 4102 7650  在线咨询
您当前的位置:首页 > 网站常识 - 网站维护

了解css媒体查询的语法

来源:北京网站建设 标签:CSS3媒体查询
分享到:
媒体查询语句如下:

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

相关网站常识

更多