Media Query для небольших устройств не работает при просмотре в Chrome - PullRequest
Новая
       34

Media Query для небольших устройств не работает при просмотре в Chrome

0 голосов
/ 30 октября 2019

помогите, мой медиа-запрос не работает в Chrome, почему?

Должен стать фиолетовым фоном, когда я делаю браузер маленьким. Я взял этот пример из школ w3, так что я знаю, что он должен работать. по умолчанию маленький размер - фиолетовый, медиазапрос не задан, а если он достигает определенного размера ширины, он должен измениться на синий. 

body { background-color: purple; }

.wrapper {overflow: auto;}
#main {margin-left: 4px;}
#leftsidebar {
  float: none;
  width: auto;
}
#menulist {
  margin: 0;
  padding: 0;
}
.menuitem {
  background: #CDF0F6;
  border: 1px solid #d4d4d4;
  border-radius: 4px;
  list-style-type: none;
  margin: 4px;
  padding: 2px;
}
@media screen and (min-width: 480px) {
  #leftsidebar {width: 200px; float: left;}
  #main {margin-left: 216px;}
  body{background-color: blue;}
}
<div class="wrapper">
  <div id="leftsidebar">
    <ul id="menulist">
      <li class="menuitem">Menu-item 1</li>
      <li class="menuitem">Menu-item 2</li>
      <li class="menuitem">Menu-item 3</li>
      <li class="menuitem">Menu-item 4</li>
      <li class="menuitem">Menu-item 5</li>
    </ul>
  </div>     
  <div id="main">
    <h1>Resize the browser window to see the effect!</h1>
    <p>This example shows a menu that will float to the left of the page if the viewport is 480 pixels wide or wider. If the viewport is less than 480 pixels, the menu will be on top of the content.
    </p>
  </div>
</div>

1 Ответ

0 голосов
/ 30 октября 2019

Вы должны проверить частоту пикселей и посмотреть, действительно ли вы достигли границ медиазапроса. Лучше всего открыть консоль, в Chrome в правом верхнем углу вы увидите текущее разрешение.

...