CSS：@media 查询的最大宽度不起作用

Question

（它适用于其他浏览器，但不适用于 chrome）

我只想在浏览器大小小于 1400px 时应用样式

与 max-width 不工作

@media only screen and (max-width:1400px)  {
.heading-left {
    left: -0.5%;
  }
}

与 min-width 它的工作

@media only screen and (min-width:480px)  {
.heading-left {
    left: -0.5%;
   }
}

但是当浏览器宽度超过 1400px 时也会改变（我知道它是这样工作的，但 max-width 不起作用）

小提琴为此

https://jsfiddle.net/j4Laddtk/

原文由 Divya Barsode 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您是否尝试过添加视口？

 <meta name="viewport" content="width=device-width, initial-scale=1">

工作 JSFiddle

Viewport 在呈现响应式页面时使用，因此主要用于处理移动网站，但在处理媒体查询时，它有助于告诉 CSS 实际设备宽度是多少。

原文由 Stewartside 发布，翻译遵循 CC BY-SA 3.0 许可协议