我正在构建一个响应式页面,而媒体查询正在以错误的宽度大小启动。我用的是铬。
@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">
我检查了以前我做的响应站点,那些断点正在正确地触发。我已经在不同的网站上测试了浏览器,媒体查询也很好。
我发现了一个关于堆栈溢出的类似问题,但没有得到回答。
媒体查询断点的值错误
不确定问题出在哪里?
发生这种情况的一个常见原因是,如果您已将浏览器窗口缩放到不是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;