将css媒体查询分组在一起有优势吗？

Posted 2023-03-06

【中文标题】将css媒体查询分组在一起有优势吗？

【英文标题】：Is there an advantage in grouping css media queries together?

【发布时间】：2012-07-22 11:51:35

【问题描述】：

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

传统的@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 查询的内容。

(More info on @media in sass on this page)

【参考方案1】：

聚会有点晚了，但根据下面的测试，性能影响似乎很小。该测试分别显示了具有 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

【讨论】：

感谢您的参考，这就是正确的。很好的发现。在 iPhone 4s 上的 Chrome 上多次尝试了 2000 个查询测试，似乎没有任何显着差异..

【参考方案2】：

我认为只需要运行一次媒体查询检查（然后在其中加载所有样式）会比检查每个选择器要少，但我没有确凿的证据。如果你得到Canary release of Chrome，里面有媒体查询工具。

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

【讨论】：

谢谢。我不使用 codekit，但谢谢，其他人可能会觉得它有用。关于金丝雀版本，您指的是哪些特定工具？

这里有一个针对 CSS 选择器的新审核，告诉您每个选择器需要多长时间运行。可能有用。

我有 Canary 但没有运气。您指的是开发工具中的 Profiles 选项卡吗？还有一个单独的审核选项卡，但似乎都没有包含任何媒体查询。

是的个人资料。运行 CSS 选择器，您将获得运行所需时间的概要文件。尝试使用分组查询和未分组查询，您应该能够比较两者。

这会有点乏味，因为它没有突出媒体查询本身的成本。我不确定仅在 Chrome 中测量是否真的与性能相关测量，Chrome 并不是最困难的浏览器 :)