css媒体查询新特性
更新于 阅读 14 次
通常我们根据css的媒体查询来设置特定条件下的样式,比如根据浏览器视口宽度来设置不同的样式;
@media screen and (min-width: 300px) { .element { //... } }
这里的 and
操作符,允许我们合并语句,即媒体类型是屏幕,宽度大于等于300px时的样式,同时我们也可以对一个范围内的视口做同样额操作。
// 当视口宽度在300px - 500px之间 @media screen and (min-width: 300px) and (max-width: 500px){ .element { //... } }
现在 Media Queries Level 4 中引入了一个新的语法,使用常见的 > 、< 和 = 来指定视口的宽度值,在语法上更直观,同时代码量更少。
一、 新的操作符
新的操作符如下:
- < : 计算一个值是否小于另一个值
- > : 计算一个值是否大于另一个值
- = : 计算一个值是否等于另一个值
- <=: 计算一个值是否小于等于另一个值
- >=: 计算一个值是否大于等于另一个值
下面我们写一个媒体查询,应用在浏览器大于等于300px:
@media (min-width: 300px) { .element { //... } }
下面使用比较操作符编写相同的内容:
@media (width >= 300px) { .element { //... } }
可以看到新的语法在感官上更容易理解。
二、 指定一个视口范围
通常我们当我们编写css媒体查询时,会创建一个断点,并对其应用一组样式。设计的时候可以是一堆断点,
下面是使用 and
操作符结合两个断点值:
// 当视口宽度在300px - 500px之间 @media screen and (min-width: 300px) and (max-width: 500px){ .element { //... } }
使用心得语法后,就会更加的剪短和易懂
// 当视口宽度在300px - 500px之间 @media (300px <= width <= 500px) { .element { //... } }
你可以点击这里查看示例css媒体查询新特性
三、 新语法解决了哪些痛点
- 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) {}
会发现这两个条件都匹配视口为300px的情况,并不是我们想要的效果,我们只想要其中一个匹配,所以需要改动其中一个条件的值。
@media (max-width: 300px) {} @media (min-width: 300.01px) {}
虽然这样解决了问题,但这并不是一种合理的解决方法,新的语法可以完美的解决这个问题。
@media (width <= 300px) {} @media (width > 300px) {}
四、兼容性
目前crome、firefox均已支持该特性,safari还不支持,可以在个人项目中尝试使用。