我在 CSS 中的媒體查詢無法正常工作

Question

我正在使用一個簡單的代碼，並且 991 處的媒體查詢無法正常工作，就像 991px 不包含在內，這是不應該的，這是我的代碼，有什么幫助嗎？

 /* On screens that are 992px wide or more, the background color is blue */ @media screen and (min-width: 992px) { body { background-color: blue; color: white; } } @media screen and (max-width: 991px) { body { background-color: olive; color: white; } }

 <h1>Resize the browser window to see the effect!</h1> <p>By default, the background color of the document is "tan". If the screen size is 992px or more, the color will change to "blue". If it is 991px or less, it will change to "olive".</p>

Answer 1

您根本不需要使用最大寬度媒體查詢，默認情況下將主體顏色設置為橄欖色，然后為超過 992 像素的任何內容添加最小寬度。

 /* On screens that are 992px wide or more, the background color is blue */ body { background-color: olive; color: white; } @media screen and (min-width: 992px) { body { background-color: blue; color: white; } }

 <h1>Resize the browser window to see the effect!</h1> <p>By default, the background color of the document is "tan". If the screen size is 992px or more, the color will change to "blue". If it is 991px or less, it will change to "olive".</p>

Answer 2

屏幕或任何 HTML 元素的寬度可以為其寬度設置浮動值，例如width: 991.2px; . 當您為寬度小於 991px 且寬度大於 992px 的屏幕定義規則時，您會在 991px 和 992px 之間存在無規則區域。 我認為沒有這個無規則區我們就無法解決，但我們可以減少他的規模。

工作示例：

 /* On screens that are 992px wide or more, the background color is blue */ @media (min-width: 992px) { body { background-color: blue; color: white; } }/* On screens that are 991.999px wide or less, the background color is olive */ @media (max-width: 991.999px) { body { background-color: olive; color: white; } } /* On screens that are between 991.999px and 992px wide, no background color is assign */

 <h1>Resize the browser window to see the effect!</h1> <p>By default, the background color of the document is "tan". If the screen size is 992px or more, the color will change to "blue". If it is 991.999px or less, it will change to "olive".</p>

Answer 3

你應該做的就是對你的@media做一個小的改變，讓min-width從992px開始工作，你的max-width從992px開始工作，而在 min-width below的媒體將在991px 。 藍色背景現在適用於 992px 及以上。

@media screen and (min-width: 992px) {
  body {
    background-color: blue;
    color: white;
  }
}

@media screen and (max-width: 992px) {
  body {
    background-color: olive;
    color: white;
  }
}