为什么此媒体查询适用于所有视口宽度？

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