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

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

我认为仅@media屏幕可以运行，但是'top'属性不起作用。

Answer 2

媒体查询工作正常。您可以在width中的.select-btn从126px更改为129px时进行检查。由于变化很小，因此可能不太清楚，但是您可以通过inspecting页面进行验证。
但是，top属性不会导致页面上的任何更改。
但这不是因为媒体查询。如果您将top中的单位用作px而不是%，则在调整大小时可以看到更改。之所以发生，是因为div的位置。当您给出10%时，表示包含块的高度的10％，在这种情况下为body。因此，您看不到使用%所做的更改。如果您提供height: 100vh然后应用top:10%，则应该可以。
您可以参考this

Answer 3

您必须在HTML的头部添加meta视口标记。

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

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

@media only屏幕和（最大宽度：--px）不起作用？

3 个答案: