css媒体查询新特性

这篇文章发表于 2022年11月02日,星期三,14:56
css媒体查询新特性

通常我们根据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还不支持,可以在个人项目中尝试使用。