在哪里放置CSS3媒体查询用于可扩展的web应用

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线程，可能会给你更多的见解。

如果你对更多细节感兴趣，你也可以阅读我的博客文章，在那里我分享了我的经验，我曾经挣扎过的事情和一些我知道的想法:-)