Html 媒体查询在移动设备上不起作用

我正在创建一个类似bootstrap的modal的信息分区。下面是我的示例，尝试调整结果空间的大小。

这是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会离开窗口。在桌面大小上一切正常

---

怎么了？也许这不是进行模态分析的最佳方法，欢迎您的建议。

您应该先更改订单，然后更改媒体查询

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

#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%;
  }
}

---

秩序很重要！应用的最后一条规则优先。断点上的引导样式表正在覆盖它。检查元素并调整屏幕大小，您可以看到它在768px屏幕大小下的变化。介质查询应位于底部。它工作正常，但由于媒体查询位于顶部，因此媒体查询中的所有样式都将被覆盖。