Question

我正在就自己在样式表中放置媒体查询的最佳位置进行哲学辩论。我试图模块化地构建我的CSS（如OOCSS或SMACSS等）。鉴于上下文，我看到两个选择：

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

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

对此有何想法？

Answer 1

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

像：

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

或：

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

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

Answer 2

方法＃2 对我来说效果更好。

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

.news-item

这种方法有一些缺点。根据我的经验，最值得注意的是可维护性很难。主要原因是：/** 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 */逻辑分布在多个不相关的CSS行中。

后来，我自然决定将相关的风格保持在一起。 方法＃2 ：

max-width

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

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

如果您对更多详情感兴趣，请read on my blog post： - ）

Answer 3

使用Sass，可以更轻松地直接在对应的下方使用媒体查询。但是如果您的CSS在您的模块中得到很好的评论，我就不会发现问题，因为这很容易找到。

您最终会编写更多代码来重新输入查询，但这并不是什么大问题。

Answer 4

可能你可以尝试css variables，这是原生支持重用你的CSS！

＆＃13;

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

＆＃13;

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/

在哪里放CSS3媒体查询？

4 个答案: