html - @media only screen and (max-width : --px) not working?

Question

当我的网页在宽度小于 620 像素的设备上打开时，我想为我的网页提供样式，但“宽度”的媒体查询不起作用它适用于“最大高度”但不适用于“宽度” . 宽度的媒体查询未显示在开发工具中，尽管它显示在开发人员的源代码中。

@media only screen and (max-width : 620px) {
div.enterdetails
{
    top:32% !important;
}
div.headline{
    top:19% !important;
}
.select-btn{
    width:129px !important;
}   }

这是片段，

.headline {
   position: relative;
    top: 0px;
	left:20%;
    width: 61%;
    font-weight: 600;
    color: black;
    font-size: 32px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    text-align:center;
	 text-align-last:center;
}
.enterdetails {
    position: relative;
    top:4%;
    width: 100%;
    height: 113px;
    background-color: rgb(0,0,0);
}
 .slctstyle
{
	position: relative;
    top: 35%;
    width: 91%;
    height: 96%;
    left: 7%;
    color: white;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	
	}
  
.select-btn{
	height: 32px;
    width: 126px;
}

@media only screen and (max-width : 620px) {
div.enterdetails
{
    top:32% !important;
}
div.headline{
    top:19% !important;
}
.select-btn{
    width:129px !important;
}   }

  
  <div class="headline">Hi, lets select data!</div>
  <div class="enterdetails">
    <div class="slctstyle">
  <select class="select-btn">
  <option>A</option>
  <option>B</option>
  </select>
  
  <select class="select-btn">
  <option>A</option>
  <option>B</option>
  </select>
  
  <select class="select-btn">
  <option>A</option>
  <option>B</option>
  </select>
  
  </div>
 </div>
  

Answer 1

媒体查询工作正常。您可以检查它，因为 .select-btn 的 width 从 126px 变为 129px。由于变化很小，可能不是很清楚，但您可以通过检查您的页面来验证它。
但是，top 属性不会导致页面发生任何变化。
但这不是因为媒体查询。如果您将 top 中的单位用作 px 而不是 %，您将能够在调整大小时看到更改。它发生的原因是 div 的定位。当您给 10% 时，它表示包含 block 高度的 10%，在本例中为 body。所以您无法使用 % 看到更改。如果你给 height: 100vh 然后应用 top:10% 它应该可以工作。
可以引用this