最大宽度的媒体查询未激活 CSS 样式答案

【问题标题】：Media query at max-width not activating CSS styles最大宽度的媒体查询未激活 CSS 样式
【发布时间】：2018-02-04 09:25:59
【问题描述】：

这是我正在处理的问题的一般概述。我有我的主要 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)">

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

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

我已经做了好几个小时了，但我不知道为什么会这样。如果我在这里遗漏了什么，请告诉我。我正在使用 Chrome 检查器查看宽度。

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

【问题讨论】：

通常的模式是使用其中之一：min-width 或 max-width
最初我决定对我的媒体查询进行“大于/小于”检查，因为我想保持样式表相互隔离，并避免使用@987654325 缩放我的代码@。但经过反思，我想我会在下一个项目中尝试后者：制作我的主要样式表，然后通过从小到大的像素宽度来定制网页。

标签： html css web media-queries

【解决方案1】：

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

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

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

【讨论】：