媒体查询以错误的宽度启动

Question

我正在构建一个响应式页面，而媒体查询正在以错误的宽度大小启动。我用的是铬。

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

例如，这个规则起作用，它只是以错误的大小激发。此规则在1320px激发，而不是在1200px激发。我已经为html准备好了meta标记。它发出的媒体查询似乎比normall应该的宽100像素左右。

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

我检查了以前我做的响应站点，那些断点正在正确地触发。我已经在不同的网站上测试了浏览器，媒体查询也很好。

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

媒体查询断点的值错误

不确定问题出在哪里？

Answer 1

发生这种情况的一个常见原因是，如果您已将浏览器窗口缩放到不是100%的大小。在您的浏览器中，选择下拉菜单‘视图'，并确保将其设置为100%。如果放大或缩小，它将不适当地触发媒体查询。

别担心会感到尴尬。它很可能已经发生，或将发生在每个人身上…但只有一次。

为了避免所有这些问题，您应该考虑使用相对单位(em或rem而不是px)来定义媒体查询。

您还可以使用JavaScript在页面加载时强制将浏览器缩放级别设置为100%。

document.body.style.webkitTransform =  'scale(1)';
document.body.style.msTransform =   'scale(100)';
document.body.style.transform = 'scale(1)';
document.body.style.zoom = screen.logicalXDPI / screen.deviceXDPI;