@media только экран и (max-width: --px) не работает?

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' на экране @media only на '200px' или, возможно, добавьте 'background-color: red', вы увидите другое, когда экран будет 620px или меньше.

Я думаю, что экран @media only работает, но свойство top не работает.

Answer 2

Медиа-запрос работает просто отлично.Вы можете проверить это, когда width из .select-btn изменится с 126px на 129px.Так как вариация невелика, она может быть не очень понятной, но вы можете проверить ее на inspecting своей страницеОднако свойство top не вызывает никаких изменений на странице.Но это не из-за медиа-запросов.Если вы используете устройство в top как px вместо %, вы сможете увидеть изменения при изменении размера.Причина в том, что это происходит из-за позиционирования div.Когда вы даете 10%, это означает 10% высоты содержащего блока, который в данном случае равен body.Таким образом, вы не могли видеть изменения, используя %.Если вы даете height: 100vh, а затем применяете top:10%, это должно сработать.Вы можете сослаться это

Answer 3

Вы должны добавить мета-тег viewport в заголовке вашего html.

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

Свойство initial-scale контролирует уровень масштабирования при первой загрузке страницы.Если этот тег не существует, при изменении размера изменяется масштаб, но не выполняется адаптивное изменение размера.