css - 在纵向模式下和低于特定视口(viewport)宽度时改变颜色？

Question

我正在尝试更改 div 的背景颜色，但前提是视口(viewport)都在一定宽度以下并且处于纵向模式。所以必须同时满足宽度和方向条件。你能帮忙吗？

到目前为止，下面是我的代码。但它似乎只看视口(viewport)是否处于纵向模式，并且仅在这种情况下已经改变了 div 上的颜色。如果视口(viewport)处于纵向模式，但仍高于 299px，它应该还没有改变颜色。因为它需要低于 299px 并且还需要在纵向模式下才能这样做。

.colorchange-div {
  width: 100px;
  height: 100px;
  background-color: orange;
}

@media only screen and (max-width: 299px) and (orientation:portrait) {
  .colorchange-div {
    background-color: green;
  }
}

<div class="colorchange-div">

</div>

Answer 1

将 max-device-width: 更改为 max-width:

像这样:

@media only screen and (max-width: 299px) and (orientation:portrait) {
  .colorchange-div {
    background-color: green;
  }
}

Working resizable Fiddle