我可以在文档头和CSS文件中进行媒体查询吗？

Question

是否可以像这样在头部声明媒体查询：

<link href="css/style-mobile.css" rel="stylesheet" type="text/css" media="all and (max-width: 736px)" />

然后在style-mobile.css中声明另一个媒体查询，如下所示：

@media only screen and (min-width: 408px) {

   .topnav-masters {
       width: 29%;
       padding: 13px 2%;
   }

}

我一直无法找到这个问题的答案，而我最初的实验似乎让我觉得无法做到。还有其他人遇到过这个吗？

这是一个奇怪的用例，我通常以移动优先的方式构建网站，并且没有这个问题。但是，在这种情况下，该网站已经有一个单独的移动网站，现在他们希望它只是响应。我试图通过将它包含在正确的点来节省时间，这样我就不必将巨大的CSS文件合并在一起了。但是，我需要在其他屏幕尺寸上进行一些CSS调整，这就是我尝试这个的原因。

Answer 1

link元素media属性中的规则用于确定应在何种情况下应用引用的样式表。样式表中的@media规则不会受到任何影响，除了它们当然不会被使用，就像样式表的其余部分一样。

所以，是的，这是可能的，它对我来说效果很好 - 就像在预期的工作中一样好，一旦窗口宽度为736像素或更小，样式表就会被应用，{{1}只要窗口宽度大于@media像素，就会应用样式表中的规则。

如果它对您不起作用，那么您可能做错了什么，或者您预计会出现问题，或者可能还有更多内容，而不是您在此处展示的内容（其他规则，特定浏览器/版本/设备等） ）。

Answer 2

是的，这是可能的，但建议尽可能将其包含在样式表中。此外，通过响应式设计，最好使用ems。