将css媒体查询分组在一起有优势吗？ [英] Is there an advantage in grouping css media queries together?

问题描述

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

(this may have been answered already - couldn't find the answer though)

传统的@media查询覆盖倾向于将所有覆盖分组为一个大小/介质在同一支架组下。

The traditional @media query override tends to group all the override for one size/medium under the same bracket group.

例如

.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中有一个非常好的方法来写@媒体查询在嵌套声明中覆盖，如下所示：

In Sass, there's a really nifty way to write @media query overrides within the nested declaration, like so:

.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查询块一起，所以输出结果是这样的：

now, when compiled, sass doesn't group the @media query blocks together, so the output ends up being something like this:

.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;
  }
}

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

I've used this technique for a recent project and when you apply that principle to a much bigger project you end up with multiple @media query section disseminated throughout your css (i've got about 20 so far).

I非常像sass技术，因为它使得更容易遵循覆盖的流程（也使其更容易移动的东西）。

I quite like the sass technique as it makes it easier to follow the flow of overrides (and also makes it easier to move things around).

但是，我想知道如果有什么缺点，有多个@media部分通过CSS，特别是性能明智？

However, I'm wondering if there is any disadvantage in having multiple @media section through the CSS, particularly performance wise?

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

I've tried the chrome css profiler but I couldn't see anything specific to @media queries.

（此页面上的@media的更多信息）

推荐答案

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

A bit late to the party, but based on the tests below the performance impact seems to be minimal. The test shows the rendering times for an example page with 2000 separate and combined media queries, respectively.

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

主要好处似乎是文件大小比任何其他

The main benefit seems to be in file size more than anything else - which, if you're compressing your CSS for production, will be substantially reduced anyway.

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

But ultimately, as the linked post below puts it:

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

"If you have 2000+ media queries in your CSS, I think that you may want to reconsider your UI development strategy versus using a gem to re-process your CSS."

详细说明问题的博文：
http://sasscast.tumblr.com/post/38673939456/sass-and-media-queries

Blog post detailing the issue: http://sasscast.tumblr.com/post/38673939456/sass-and-media-queries

这篇关于将css媒体查询分组在一起有优势吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！