我们可以使用两种或者更多的查询条件,来更加精准地命中使用11寸MacBook Air的用户。在查询条件中插入类似and
、not
和only
这样的连接词就可以实现,如下所示。
@media screen
and (min-width: 48rem) {
[…]
}
这个CSS声明中的样式规则,只会在宽度大于48rem的设备上生效。而符合这个宽度规则的打印机设备,亦不会采用这段规则。
在下面的例子中,样式规则只会在device-height
值大于900px的屏幕设备上生效。
@media only screen
and (min-device-height: 56.25rem) {
[…]
}
我们可以使用min-device-height
和device-aspect-ratio
这样的媒体查询,来组成一个查询组合,从而实现对11寸MacBook Air的极精密和精准的匹配。
@media only screen
and (min-device-height: 56.25rem)
and (device-aspect-ratio: 16/10) {
[…]
}
截至目前,所有的规则都是包含在一条查询中,样式只有在查询结果返回为真的时候才生效。如果我们想要两条查询,也许只是来区分下11寸MacBook Air的不同分辨率,我们只需要用逗号来对媒体查询做下分割,而分割开的两条查询只要有一条返回为真,包含的CSS规则都会生效。
@media only screen
and (min-device-height: 56.25rem)
and (device-aspect-ratio: 16/10),
screen
and (min-device-height: 37.5rem)
and (device-aspect-ratio: 4/3) {
[…]
}