為什么此媒體查詢適用於所有視口寬度？

Question

我是一名新程序員 - 完成了我的第一個 web dev class 的最后一個項目。 我有一個 web 頁面，它看起來像我想要的那樣，寬度超過 1409 像素。 我正在嘗試使其具有響應性，以便在寬度降至 1409 像素或以下時它會發生變化。 我有這個元標記：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

我的媒體查詢是：

@media screen and (max-width: 1408px)
{
.background {
    height:100%;
  }

}

但是，一旦我添加了這個查詢並將其保存在我的樣式表中，它是否會一直將我的更改（使背景高度為 100%）應用於所有寬度？ 為什么會這樣？

謝謝。

Answer 1

您需要在沒有媒體查詢的情況下添加.background class 並提供其他分辨率所需的高度值或添加height: 'auto'因為如果默認情況下其他分辨率沒有其他樣式，瀏覽器將應用此媒體查詢樣式。

Answer 2

請嘗試發布您的 HTML 代碼。 我從您的問題中了解到，您在使用 class background的div時遇到問題，您可能有以下解決方案：

HTML：

<div class="background">
 Test
</div>

CSS：

.background{
  color: #ffffff;
  height: 100px;
  background-color: red;
}

@media(min-width: 1409px){
  .background{
    height: 100vh;
    background-color: blue;
  }
}

代碼筆： https://codepen.io/debrajr/pen/OJyZKzG