媒体查询范围语法升级

媒体查询是 CSS 的功能，它可以用于创建和实现适合所用设备属性的布局，其中一些属性包括页面的高度和宽度。

在为媒体查询设置范围时，以往的语法是：

/* 视口宽度在 320px - 768px 之间 */
@media (min-width: 320px) and (max-width: 768px) {
  padding-left: 23px;
}
/* 视口高度在 320px 以下时 */
@media (max-height: 320px) {
  padding: 20px;
}

媒体查询第 4 级引入了一种新的范围语法，能够和比较运算符 >、<、>=、<= 一起使用，以更简洁的方式表达范围查询。

@media (320px <= width <= 768px) {
  padding-left: 23px;
}

/* 视口高度在 320px 以下时 */
@media (height <= 320px) {
  padding: 20px;
}

目前该语法的浏览器支持情况：

致力于以简单的方式传递复杂有用的知识和资讯，欢迎关注我的公众号 JSHub。