html - 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 不起作用)

为此 fiddle

https://jsfiddle.net/j4Laddtk/

Answer 1

您是否尝试过添加视口(viewport)？

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

Working JSFiddle

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