CSS3媒体查询放在哪里？答案

【问题标题】：Where to put CSS3 media queries?CSS3媒体查询放在哪里？
【发布时间】：2012-07-04 10:20:39
【问题描述】：

我正在与自己就在样式表中放置媒体查询的最佳位置进行哲学辩论。我正在尝试以模块化方式构建我的 CSS（如 OOCSS 或 SMACSS 等）。鉴于这种情况，我看到了两种选择：

将所有媒体查询放在单独的样式表或主样式表的部分中。
将媒体查询置于其基本对应项之下。例如，如果我有一个名为“news-item”的模块，我可以将任何必要的媒体查询样式放在该模块定义的正下方。

我倾向于后者，但这意味着我会有更多独立的媒体查询（需要响应式调整的每个 CSS 逻辑块的独立媒体查询）。

对此有什么想法吗？

【问题讨论】：

标签： css responsive-design media-queries

【解决方案1】：

如何使用媒体查询来加载特定于设备的样式表

喜欢：

@import url(mydevice.css) this and (that);

或：

<link rel="stylesheet" media="only this and (that)" href="mydevice.css" />

...如果您将设备特定的调整视为主要布局的一种“子主题”（只是覆盖一些属性），这对我来说也很有意义。

【讨论】：

我确定我在某处读到这种方法比在样式表中包含媒体查询要慢得多。

【解决方案2】：

使用 Sass，可以更轻松地直接在对应项下方使用媒体查询。但是，如果您的 CSS 在您的模块中得到了很好的注释，我认为将查询放在下面没有问题，因为这很容易找到。

您最终会编写更多代码来重新输入查询，但没什么大不了的。

【讨论】：

【解决方案3】：

方法 #2 更适合我。

当我还是新手时，我使用的是方法#1 - 我一起编写媒体查询（在我的样式表底部或另一个文件中）。

.header { ... }
.news-item { ... }
.footer { ... }

/**
 * ...
 *
 * bla bla, imagine a huge amount of styles here
 *
 * ...
 */

/** All style tweaks for screens < 1024px */
@media screen and (max-width: 1024px) {
  .header { ... }
  .news-item { ... }
}

这种方法有一些缺点。根据我的经验，最值得注意的是可维护性很困难。主要原因：.news-item 逻辑分布在多个不相关的 CSS 行中。

后来，很自然地，我决定将相关的样式放在一起。 方法#2：

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

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

/** ... and so on */

但是，在这种方法中，全面重复媒体查询max-width 值看起来不够可维护。我通过使用 CSS 预处理器（如 SASS）解决了这个问题，它允许我用变量替换所有它们并定义它们一次。

为了提高可维护性并使这些定义更加优雅，我开始在媒体查询之上使用抽象。

如果您有兴趣了解更多详情，请read on my blog post :-)

【讨论】：

【解决方案4】：

也许你可以试试css variables，这是原生支持复用你的css！

:root {
  --main-color: #F06D06;
}

.main-header {
  color: var(--main-color);
}
.main-footer {
  background-color: var(--main-color);
}

https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

https://developers.google.com/web/updates/2016/02/css-variables-why-should-you-care

https://css-tricks.com/difference-between-types-of-css-variables/

【讨论】：