css媒体查询新特性

原文地址

通常我们根据css的媒体查询来设置特定条件下的样式，比如根据浏览器视口宽度来设置不同的样式；

@media screen and (min-width: 300px) {
    .element {
        //...
    }
}
1
2
3
4
5

这里的 and 操作符，允许我们合并语句，即媒体类型是屏幕，宽度大于等于300px时的样式，同时我们也可以对一个范围内的视口做同样额操作。

// 当视口宽度在300px - 500px之间
@media screen and (min-width: 300px) and (max-width: 500px){
    .element {
        //...
    }
}
1
2
3
4
5
6

现在 Media Queries Level 4 中引入了一个新的语法，使用常见的 > 、< 和 = 来指定视口的宽度值，在语法上更直观，同时代码量更少。

一、 新的操作符

新的操作符如下：

• < : 计算一个值是否小于另一个值
• > : 计算一个值是否大于另一个值
• = : 计算一个值是否等于另一个值
• <=: 计算一个值是否小于等于另一个值
• >=: 计算一个值是否大于等于另一个值

下面我们写一个媒体查询，应用在浏览器大于等于300px：

@media (min-width: 300px) {
    .element {
        //...
    }
}
1
2
3
4
5

下面使用比较操作符编写相同的内容:

@media (width >= 300px) {
    .element {
        //...
    }
}
1
2
3
4
5

可以看到新的语法在感官上更容易理解。

二、 指定一个视口范围

通常我们当我们编写css媒体查询时，会创建一个断点，并对其应用一组样式。设计的时候可以是一堆断点，

下面是使用 and 操作符结合两个断点值：

// 当视口宽度在300px - 500px之间
@media screen and (min-width: 300px) and (max-width: 500px){
    .element {
        //...
    }
}
1
2
3
4
5
6

使用心得语法后，就会更加的剪短和易懂

// 当视口宽度在300px - 500px之间
@media  (300px <= width <= 500px) {
    .element {
        //...
    }
}
1
2
3
4
5
6

三、 新语法解决了哪些痛点

• min-width 操作表示width大于等于某个值（比如 min-width: 300px，表示 300px <= width）
• max-width 操作表示width大于等于某个值（比如 max-width: 300px，表示 width <= 300px）

当在300px作为临界点，使用min-wdith、max-width来定义不同的样式：

@media  (max-width: 300px) {}
@media  (min-width: 300px) {}
1
2

会发现这两个条件都匹配视口为300px的情况，并不是我们想要的效果，我们只想要其中一个匹配，所以需要改动其中一个条件的值。

@media  (max-width: 300px) {}
@media  (min-width: 300.01px) {}
1
2

虽然这样解决了问题，但这并不是一种合理的解决方法，新的语法可以完美的解决这个问题。

@media  (width <= 300px) {}
@media  (width > 300px) {}
1
2

四、兼容性

目前crome、firefox均已支持该特性，safari还不支持，可以在个人项目中尝试使用。