通过媒体查询,我们可以实现在不同的设备,不同的屏幕大小,加载不同的样式表,以实现响应式的布局效果。
但是这种设计也存在着一定程度上的缺陷,在适配移动端的时候,大量使用 display:none 隐藏富媒体元素,这样会造成不必要的流量浪费;
1.媒体类型
在实际开发中,最常用的媒体类型也就只有all,print,screen这三种类型。
//根据不同的设备类型,加载不同CSS文件
<link rel="stylesheet" type="text/css" href="css/1.css" media="all"/>
<link rel="stylesheet" type="text/css" href="css/2.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="css/3.css" media="print"/>
//除了可以写入外部文件,也可以直接使用样式表
<style type="text/css">
@media screen{
}
@media print{
}
</style>
2.媒体特性
媒体查询除了可以根据不同的设备类型去加载不同样式文件,也可以根据不同设备特性去加载不同的CSS样式表;
一般用来根据不同的屏幕尺寸来适配不同的样式。
1.最大宽度Max Width
<link rel="stylesheet" type="text/css" href="css/1.css" media="(max-width:600px)"/>
//如图:1.CSS 的最大适配屏幕宽度为600px,即当屏幕小于600px时才会加载 1.CSS
2.最小宽度Min Width
<link rel="stylesheet" type="text/css" href="css/1.css" media="(min-width:600px)"/>
//如图:1.CSS 的最小适配屏幕宽度为600px,即当屏幕大于600px时才加载 1.CSS
3.多特性同时使用
<link rel="stylesheet" type="text/css" href="css/1.css" media="(min-width:600px) and (max-width:900px)"/>
//如图:多特性同时使用,当屏幕大小大于600px小于900px的时候,加载 1.CSS
4.min-device-width 与 max-device-width
代表的屏幕可见区域的最大值与最小值,与Max Width Min Width类型相似
5.not关键字,用来排除某种特性,相当于“非”
<link rel="stylesheet" type="text/css" href="css/1.css" media="not screen and (min-width:600px)"/>
//如图:适配1.CSS的最小屏幕宽度为600px,加上not之后就会变成,适配1.CSS的最大屏幕宽度为600px;
6.only关键字
only用来定某种特定的媒体类型;
@media only screen and (min-width: ) {
}
//如图:only screen 用来规定媒体类型为 screen