可扩展 Web 应用的 CSS3 媒体查询应该放在哪里？答案

【问题标题】：Where to put CSS3 Media Queries for a scalable web app?可扩展 Web 应用的 CSS3 媒体查询应该放在哪里？
【发布时间】：2013-04-14 02:50:54
【问题描述】：

目前我创建了一个名为 .media-queries.css 的文件来存放我的所有媒体查询和网站上的各种断点（5 个断点）；然而，事实证明这对后端来说是一种痛苦。为了特定于 CSS，我不得不在这些媒体查询中复制我的网站结构。这种方法似乎不可扩展。我是否最好将媒体查询直接烘焙到该特定选择器所在位置的实际 CSS 中？

有哪些替代方法和设计模式？

【问题讨论】：

标签： css less media-queries

【解决方案1】：

您可以跟随 Bootstrap 和 Foundation 等伟大思想的领导，将所有内容合并到同一个文件中。维护会更容易，并且站点性能会略有改善。完全跑题了，但我发现使用http://lesscss.org 确实有助于保持CSS 井井有条。

祝你好运！

【讨论】：

谢谢。我目前正在使用 LESS CSS，它确实帮助我保持我的 CSS 井井有条，尤其是嵌套。但是，我真的倾向于将媒体查询混合到我的 CSS 中。例如，当我有多个媒体查询断点时，必须重新创建整个页面或模板的 CSS 层次结构不会扩展。

【解决方案2】：

根据我的经验，将相关样式放在一起效果最好。

这是一个实际的例子：

/** Header's styles and media queries */
.header {
  ...
}
@media screen and (max-width: 1024px) {
  .header { ... }
}
@media screen and (max-width: 720px) {
  .header { ... }
}

/** Nav's styles and media queries */
.nav {
  ...
}
@media screen and (max-width: 1024px) {
  .nav { ... }
}
@media screen and (max-width: 720px) {
  .nav { ... }
}

/** ... and so on */

这里是another similar StackOverflow thread，它可能会给您带来更多见解。

如果你对更多细节感兴趣，你也可以read on my blog post在这里分享我的经验、我一直在努力的事情以及我知道的一些想法:-)

【讨论】：