媒体查询在移动设备上不起作用[重复]答案

【问题标题】：media query is not working on mobile [duplicate]媒体查询在移动设备上不起作用[重复]
【发布时间】：2018-03-07 00:34:11
【问题描述】：

我正在创建一个类似于 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 会超出窗口。在桌面大小上一切都很好。

怎么了？也许这不是做模态的最佳方式，欢迎您提出建议。

【问题讨论】：

订单很重要！最后应用的规则优先。
某些东西被断点上的引导样式表覆盖。检查元素并调整屏幕大小，您可以看到它在 768px 屏幕大小时的变化
媒体查询应该在底部。它工作得很好，但因为媒体查询在顶部，媒体查询中的所有样式都将被覆盖。

标签： html css

【解决方案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%;
  }
}

【讨论】：

【解决方案2】：

你应该先改变主类然后媒体查询的顺序

【讨论】：