媒体查询 用法更简单

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

简短回答：不。

长（-er）答案：CSS 中唯一可以指定一系列逗号分隔的媒体查询的地方是作为 @import At-Rule 的可选参数，这些参数没有自己的样式或速记。

此外，您建议的语法具有误导性。"600px"媒体查询是什么意思？媒体查询可以是设置状态（例如"屏幕"）或键值对（例如"最大宽度：600px"）。因此，这看起来更像是"最大宽度：2400px：19px"，这在几乎任何语言中都是令人困惑和语法不合适的。