媒体查询以错误的宽度触发

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (178)

我正在构建一个响应式页面,媒体查询的宽度大小错误。我正在使用Chrome。

@media screen and (max-width: 1200px) {
 .logo-pic {
    display: none;
}
}

例如,此规则适用于仅以错误的大小触发。此规则以1320px而非1200px激发。我有html的meta标签。它似乎是触发媒体查询100左右像素比它应该更宽。

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

我检查了我之前的响应网站,这些断点正在正确触发。我在不同的网站上测试了浏览器,媒体查询也很好。

我发现了一个关于堆栈溢出的类似问题,但它没有得到答复。

介质查询错误值的断点

不确定是什么问题?

提问于
用户回答回答于

看看你的单位:rem,em,px。

我只是遇到了这个问题,这是因为我的基本字体大小是10px而我在媒体查询中放了max_width:102.4rem,但它的激活速度大约是1600px而不是预期的1024px。

它仍然以我的102.4m激活1600px,但是当我使用1024px时它可以正常工作。

这篇文章讨论了我所暗示的一切:

https://zellwk.com/blog/media-query-units/

问题的根源似乎是单位。

用户回答回答于

您是否有iframe(或模态或更小的窗口)在媒体查询中加载相同的CSS表格?如果是这种情况,那就是一个缓存问题,你需要将CSS文件与一个哑参数链接起来,如:

<link href="myCss.css?iframe=1" />

为了将css文件作为新文件加载而不是采用缓存版本...我希望我很清楚:)

扫码关注云+社区

领取腾讯云代金券