@media only screen and (max-width: --px) 不工作？

Question

当我的网页在宽度小于 620px 的设备上打开时，我想为我的网页添加样式，但 'width' 的媒体查询不起作用它对 "max-height" 有效但不是对于 "width"。宽度的媒体查询未显示在开发工具中，但它显示在开发人员的源代码中。

@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

您必须在 html 的头部添加元视口标签。

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

initial-scale 属性控制首次加载页面时的缩放级别。如果此标签不存在，则调整大小时会更改比例但不会进行自适应调整。

Answer 2

尝试将@media only 屏幕内的 '.select-btn' 更改为 '200px' 或者添加一个 'background-color:red'，当屏幕为 620px 或更小时，你会看到不同。

我认为 @media only 屏幕工作正常，但 'top' 属性不工作。

Answer 3

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

@media only screen and (max-width: --px) 不工作？

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

html

css

media-queries