Question

这是我正在处理的问题的一般概述。我有我的主要CSS样式表和另外两个有媒体查询的人。

<link rel="stylesheet" href="Styles/mainStyles.css"> <link rel="stylesheet" href="Styles/smStyles.css" media="only screen and (min-width: 768px) and (max-width: 991px)"> <link rel="stylesheet" href="Styles/mdStyles.css" media="only screen and (min-width: 992px) and (max-width: 1269px)">

当浏览器的宽度为990px时，将调用smStyles样式表。在992px处，mdStyles接管了。

但如果宽度为991px，则smStyles不再生效，我的网页将恢复为mainStyles表（使整个页面看起来像一团糟）。

我已经在这里工作了几个小时，我无法弄清楚它为什么会发生。如果我在这里遗失了什么，请告诉我。我正在使用Chrome检查器查看宽度。

（另外，是的，我确实有<meta name="viewport" content="width=device-width, initial-scale=1">）

Answer 1

如果你这样做会发生什么：

<link rel="stylesheet" href="Styles/mdStyles.css" media="only screen and (min-width: 991px) and (max-width: 1269px)">

我知道它是mdStyles到991的重叠设置最小宽度，但它会起作用吗？

最大宽度的媒体查询不激活CSS样式

1 个答案: