@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。
当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面
实例:
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}
@media 媒体类型and (媒体特性){你的样式}
1.最大宽度max-width
“max-width”是媒体特性中最常用的一个特性,其意思是指媒体类型小于或等于指定的宽度时,样式生效。如:
@media screen and (max-width:480px){ .ads { display:none; } }
上面表示的是:当屏幕小于或等于480px时,页面中的广告区块(.ads)都将被隐藏。
2.最小宽度min-width
“min-width”与“max-width”相反,指的是媒体类型大于或等于指定宽度时,样式生效。
@media screen and (min-width:900px){ .wrapper{width: 980px;} }
上面表示的是:当屏幕大于或等于900px时,容器“.wrapper”的宽度为980px。
3.多个媒体特性使用
Media Queries可以使用关键词"and"将多个媒体特性结合在一起。也就是说,一个Media Query中可以包含0到多个表达式,表达式又可以包含0到多个关键字,以及一种媒体类型。
当屏幕在600px~900px之间时,body的背景色渲染为“#f5f5f5”,如下所示。
@media screen and (min-width:600px) and (max-width:900px){ body {background-color:#f5f5f5;} }
未完待续。。