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

Question

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

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

Answer 1

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

祝你好运！

Answer 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 */

这是另一个类似的 StackOverflow 线程，可能会给您更多的见解。

如果你对更多细节感兴趣，你也可以阅读我的博客文章，我在这里分享我的经验、我一直在努力的事情以及我知道的一些想法 :-)