1

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

<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 调整，这就是我尝试这样做的原因。

4

2 回答 2

2

linkelements属性中的规则media用于确定在什么情况下应该应用引用的样式表。样式表中的@media规则不会以任何方式受此影响，当然它们可能不会被使用，就像样式表的其余部分一样。

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

如果它对您不起作用，那么您可能做错了什么，或者您期望有什么错误，或者可能比您在此处显示的内容更多（其他规则、特定浏览器/版本/设备等）。

于 2013-07-08T20:51:15.853 回答
0

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

于 2013-07-08T21:07:51.597 回答