以最大寬度的媒體查詢未激活CSS樣式

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的min-width設置為991的重疊，但這行得通嗎？