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

以下another similar StackOverflow thread可能会为您提供更多见解。

如果你对更多细节感兴趣，你也可以read on my blog post我分享我的经验，我遇到过的事情以及我所知道的一些想法： - ）

何处为可扩展的Web应用程序提供CSS3媒体查询？

2 个答案: