媒体查询用法

最后更新于:2022-04-01 10:47:33

就在不久之前,有一个关于应该在哪里书写媒体查询的热门讨论:媒体查询是应该与选择器写在一起(Sass 允许这种方式),还是要彻底地分离开?我想说我是**媒体查询紧贴选择器**方式的狂热捍卫者,并且认为这会和**组件**一样表现得很棒。 ~~~ .foo { color: red; @include respond-to('medium') { color: blue; } } ~~~ 生成结果: ~~~ .foo { color: red; } @media (min-width: 800px) { .foo { color: blue; } } ~~~ 可能你已经了解到,这种习惯会导致 CSS 输出文件中出现重复的媒体查询语句。不过[测试了](http://sasscast.tumblr.com/post/38673939456/sass-and-media-queries)和下面的话认为一旦 Gzip(或者其他相同软件)完成压缩就不会有什么问题: > ……我们反复测试了贴合与分离两种媒体查询方式对性能的影响,结论是即使在最差情况下也没有明显差异,而在最好情况下差异更是少之又少。 > — [Sam Richards](https://twitter.com/snugug), 关于[Breakpoint](http://breakpoint-sass.com/)的看法 如果现在你仍担心媒体查询的副本问题,你可以使用工具来合并它们,比如[这个 gem](https://github.com/aaronjensen/sass-media_query_combiner),但是我有必要警告你移动相关 CSS 代码可能会有副作用。 是否了解资源顺序是非常重要的。 ## 扩展阅读 * [Sass and Media Queries](http://sasscast.tumblr.com/post/38673939456/sass-and-media-queries) * [Inline or Combined Media queries? Fight!](http://benfrain.com/inline-or-combined-media-queries-in-sass-fight/) * [Sass::MediaQueryCombiner](https://github.com/aaronjensen/sass-media_query_combiner) 如果你喜欢 Sass Guidelines,请支持它 [ 支持 Sass Guidelines](https://gum.co/sass-guidelines)
';