Margin-top 不会根据媒体查询而改变答案

【问题标题】：Margin-top not changing according to media queryMargin-top 不会根据媒体查询而改变
【发布时间】：2020-11-07 22:55:53
【问题描述】：

我正在为我的网站创建一个产品部分，但由于媒体查询无法正常工作，因此无法使其响应。这是我的代码：

HTML

<div id="products" class="products">
        <h3>Our Products</h3>
</div>

CSS

.products {
height: 30vh;
width: 80%;
margin-top: 15%;
margin-left: 10%;
}
@media only screen and (max-width: 600px) {


 .products {
        height: 30vh;
        width: 80%;
        background: #333;
        margin-top: 50%;
        margin-left: 10%;
        z-index: 2;
    }
}

即使移动端的 margin-top 应该是 50%，但当我更改值时，它并没有改变，对可能导致问题的任何见解都没有改变。

【问题讨论】：

看到这个答案stackoverflow.com/a/19038303/11676080

标签： html css media-queries positioning

【解决方案1】：

请添加 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 头标签内的元标签然后检查

.products {
height: 30vh;
width: 80%;
margin-top: 15%;
margin-left: 10%;
}
@media only screen and (max-width: 600px) {


 .products {
        height: 30vh;
        width: 80%;
        background: #333;
        margin-top: 50%;
        margin-left: 10%;
        z-index: 2;
    }
}

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <div id="products" class="products">
          <h3>Our Products</h3>
  </div>
</body>

【讨论】：