css - 媒体查询更简单的用法？

Question

也许这样问是愚蠢的，但是有没有办法做这样的事情:

html{
  @include responsive("font-size", 11px,
    (
       600px: 100%,
       800px: 120%,
      1180px: 130%,
      1300px: 140%,
      1750px: 160%,
      1900px: 180%,
      2100px: 200%,
      2400px: 19px
    )
  );
}

这是从一些 bugsnag 平台上获取的(我不知道它是什么)，但这并不重要。我想知道我是否可以用纯 css 做这样的事情？在调整窗口大小时/任何分辨率更改时平滑响应更改。

还有，对于旧版浏览器，我应该如何使用这种东西的回退？

谢谢!

Answer 1

简答: No.

长(-er)答案:CSS 中唯一可以指定一系列以逗号分隔的媒体查询的地方是 optional parameters to the @import At-Rule。 ，并且这些没有自己的样式或速记。

此外，您提出的语法具有误导性。 “600px”媒体查询是什么意思？ Media queries are either set states (e.g. "screen") or key-value pairs (e.g. "max-width: 600px").因此，这最终看起来更像是“max-width: 2400px: 19px”，这在几乎所有语言中都令人困惑且在句法上不合适。