在哪里放CSS3媒体查询？

Question

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

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

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

有什么想法吗？

Answer 1

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

喜欢：

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

或者：

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

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