@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。(IE9+)
当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。
语法:
@media mediatype and(在)| not(不再)|only (仅在)(media feature (设备尺寸)) {
/*样式代码*/
}
首先,在html的meta中写入
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
name=”viewport” 说明此meta标签定义视口的属性
initial-scale=1.0 意思是将页面不放大,还是1.0
width=device-width 告诉浏览器页面的宽度等于设备宽度
常见媒体尺寸:
@media screen and (min-width:1200px)
@media screen and (min-width:992px)
@media screen and (min-width:768px)
@media screen and (min-width:480px)
注:在设置时,需要注意先后顺序,不然后面的会覆
如下案例:
and关键词
当屏幕宽度小于300px时候,屏幕背景颜色就会变为淡蓝色。否则为淡绿色。
body {
background-color:lightgreen;
}
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}
当屏幕在600~900之间则用#f5f5f5来做背景
@media screen and (min-width:600px) and (max-width:900px){
body {background-color:#f5f5f5;}
}
not关键词
使用关键词“not”是用来排除某种制定的媒体类型,也就是用来排除符合表达式的设备
@media not print and (max-width: 1200px){样式代码}
上面代码表示的是:样式代码将被使用在除打印设备和设备宽度小于1200px下所有设备中。