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用于渲染响应式页面，因此主要用于处理移动网站，但在处理媒体查询时，它有助于告诉CSS实际的设备宽度是什么。

Answer 2

尝试这种方法。

这将基于设备
进行定位

@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 3

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

Answer 4

如果您尝试了所有方法但仍然卡住，请记住媒体查询需要位于底部，因为 CSS 是自上而下应用的。

如果你有

.container {
  color: white;
}

并且您希望屏幕宽度小于 600 像素时字体为粉红色，您的其他媒体查询需要低于原始 .container 样式。

.container {
  color: white;
}

@media only screen and (max-width: 600px) {
  .container {
    color: pink;
  }
}

因此，如果您的媒体查询位于顶部，则白色的默认颜色将覆盖粉红色的媒体查询。

Answer 5

这对我有用

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

Answer 6

可能发生的另一件事是，您所做的事情确实很愚蠢，例如：

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

确保将px标识为最大宽度的数量。并不是说我曾经在一个简单的事情上呆了一个小时。

Answer 7

开发人员工具说视口的大小是1400px，但css考虑的实际宽度超过1400px。因此，媒体查询无法正常工作。

Answer 8

@media only screen and (max-width: 1000px) {
  /*Don't forget to add meta viewport in your html*/
}

如果不起作用，请尝试在浏览器中检查元素导航网络并切换禁用的缓存。有时，它不适用于浏览器缓存。

快乐编码

Answer 9

开发人员工具说视口的大小为1400px，但css考虑的实际宽度大于1400px。因此，媒体查询无法正常工作

Answer 10

这个问题导致我在 Bootstrap 3 无法正常工作时花了几个小时来解决它。原因是在每个网页的头部，它需要这个元视图元素。

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

Answer 11

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