34

（这可能已经回答了 - 虽然找不到答案）

传统的@media 查询覆盖倾向于将一种尺寸/中等的所有覆盖分组在同一个括号组下。

例如

.profile-pic {
    width:600px;
}
.biography {
    font-size: 2em;
}

@media screen and (max-width: 320px) {
    .profile-pic {
        width: 100px;
        float: none;
    }
    .biography {
        font-size: 1.5em;
    }
}

在 Sass 中，有一种非常好的方法可以在嵌套声明中编写 @media 查询覆盖，如下所示：

.profile-pic {
width:600px;
  @media screen and (max-width: 320px) {
    width: 100px;
    float: none;
  }
}

.biography {
    font-size: 2em;
  @media screen and (max-width: 320px) {
    font-size: 1.5em;
  }
}

现在，在编译时，sass 不会将 @media 查询块组合在一起，因此输出最终会是这样的：

.profile-pic {
    width:600px;
}
@media screen and (max-width: 320px) {
  .profile-pic {
    width: 100px;
    float: none;
  }
}

.biography {
    font-size: 2em;
}
@media screen and (max-width: 320px) {
  .biography {
    font-size: 1.5em;
  }
}

我在最近的一个项目中使用了这种技术，当你将这个原则应用到一个更大的项目中时，你最终会在整个 css 中传播多个 @media 查询部分（到目前为止我有大约 20 个）。

我非常喜欢 sass 技术，因为它可以更轻松地跟踪覆盖的流程（并且也可以更轻松地移动事物）。

但是，我想知道通过 CSS 设置多个 @media 部分是否有任何缺点，尤其是在性能方面？

我已经尝试过 chrome css 分析器，但我看不到任何特定于 @media 查询的内容。

（此页面上有关@media in sass 的更多信息）

4

2 回答 2

17

聚会有点晚了，但根据下面的测试，性能影响似乎很小。该测试分别显示了具有 2000 个单独和组合媒体查询的示例页面的呈现时间。

http://aaronjensen.github.com/media_query_test/

主要的好处似乎是文件大小比其他任何东西都重要——如果你压缩你的 CSS 用于生产，无论如何都会大大减少。

但最终，正如下面链接的帖子所说：

“如果您的 CSS 中有 2000 多个媒体查询，我认为您可能需要重新考虑您的 UI 开发策略，而不是使用 gem 来重新处理您的 CSS。”

详细说明该问题的博文：https ://web.archive.org/web/20140802125307/https://sasscast.tumblr.com/post/38673939456/sass-and-media-queries

于 2013-03-26T17:35:24.763 回答
1

我会假设只需要运行一次媒体查询检查（然后在其中加载所有样式）会比检查每个选择器要少，但我没有确凿的证据。如果您获得了Chrome 的 Canary 版本，则其中包含媒体查询工具。

当您使用 SASS 时，这篇文章可能会引起您的兴趣 - http://css-tricks.com/media-queries-sass-3-2-and-codekit/

于 2012-07-24T09:16:20.623 回答