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时也会改变(我知道它是如何工作但最大宽度不起作用)

小提琴这个

Answer 1

您是否尝试过添加视口？

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

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

Answer 2

您的浏览器版本 ZOOM与100%级别不同吗？如果是这样，请将（放大和缩小）重置为100%。

Answer 3

另一件可能发生的事情是你做了一些非常愚蠢的事情，比如：

@media only screen and (max-width: 1400)  { ... }

确保输入 px 来确定最大宽度的数量。

@media only screen and (max-width: 1400px)  { ... }

我从来没有在这么简单的事情上停留过一个小时。

Answer 4

试试这个方法.

这将基于设备进行定位

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

}

基于浏览器窗口区域进行定位

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

}

Answer 5

这个问题让我花了好几个小时才用 Bootstrap 3 解决它，但它根本不起作用。原因是在每个网页的标题中，它需要这个元视图元素。

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

Answer 6

您需要在声明标准后放置 @media 查询