媒体查询无法在移动设备上复制[重复]

Question

这个问题在这里已有答案：

• CSS media queries - Order matters? 3回答

我正在创建一个像bootstrap模态的信息DIV。这是我的示例，尝试调整结果空间的大小。 https://jsfiddle.net/p1csbjy9/2/

这是CSS代码：

@media (min-width: 300px) and (max-width: 670px) {
  #infoWindow {
    min-height: 200px;
    background-color: #eee;
    position: fixed;
    bottom: 5%;
    border-radius: 10px;
    border: 1px solid #ccc;
    z-index: 10;
    left: 0;
    padding: 1%;
  }
}

#infoWindow {
  min-height: 200px;
  background-color: #eee;
  position: fixed;
  bottom: 5%;
  border-radius: 10px;
  border: 1px solid #ccc;
  z-index: 10;
  left: 33%;
  padding: 1%;
  max-height: 300px;
  overflow-y: auto;
}

问题是，当我将窗口调整为移动窗口时，DIV会离开窗口。在桌面大小一切都很好。

怎么了？也许这不是做模态的最好方法，欢迎你提出建议。

Answer 1

交换顺序，以便媒体查询覆盖默认值，如下所示：

#infoWindow {
  min-height: 200px;
  background-color: #eee;
  position: fixed;
  bottom: 5%;
  border-radius: 10px;
  border: 1px solid #ccc;
  z-index: 10;
  left: 33%;
  padding: 1%;
  max-height: 300px;
  overflow-y: auto;
}

@media (min-width: 300px) and (max-width: 670px) {
  #infoWindow {
    min-height: 200px;
    background-color: #eee;
    position: fixed;
    bottom: 5%;
    border-radius: 10px;
    border: 1px solid #ccc;
    z-index: 10;
    left: 0;
    padding: 1%;
  }
}

Answer 2

您应该更改第一个主类的顺序，然后更改媒体查询