我正在为我的网站创建一个产品版块，但由于媒体的询问不起作用，我一直很难做出回应。下面是我的代码:
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;
}
}
即使移动端的边距上限应该是50%，但当我改变这个值时，它并没有改变，任何关于可能导致问题的洞察力都不会改变。
请在head标记中添加元标记&然后检查
.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>