提问者:小点点

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


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

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

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

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

媒体查询断点的值错误

不确定问题出在哪里?


共1个答案

匿名用户

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

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

为了避免所有这些问题,您应该考虑使用相对单位(emrem而不是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;