在纵向模式下和某些视口宽度以下时更改颜色？

Question

我正在尝试更改div的背景颜色，但仅当视口在某个宽度下并且还处于纵向模式时。因此必须满足宽度和方向条件。你能帮忙吗？

以下是我的代码。但似乎只能查看视口是否处于纵向模式，并且仅在该条件下已经改变了div上的颜色。如果视口处于纵向模式，但仍高于299像素，则它不应更改颜色。因为它需要低于299像素并且还需要在纵向模式下才能这样做。

＆＃13;

＆＃13;

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

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

＆＃13;

<div class="colorchange-div">

</div>

＆＃13;

＆＃13;

＆＃13;

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

Answer 2

而不是min-device-width，你需要提到max-device-width来处理这种情况。