当页面 100% 缩放时,CSS 媒体查询不起作用
when page is 100% zoom, CSS Media Query doesnt' work
我有 2 个媒体查询。
@media screen and (max-device-width: 1199px) {
#content-id {
height: 480px !important;
background: rgb(16, 25, 100);
width: 99%;
border-radius: 5px;
margin-top: 0px;
max-height: 30%;
}
}
2:
@media screen and (min-device-width: 1200px) {
#content-id {
height: 580px !important;
background: rgb(124, 57, 57);
width: 99%;
max-height: 30%;
}
}
正如你所看到的背景和高度不同。当页面大小改变时,它们必须改变。
我用Chrome。当我用鼠标手动缩小页面时,它不起作用。浏览器的缩放比例为 100%。但我按右键单击并进行检查。在我设置设备(ipad 或响应式等)之后,它就可以工作了。如果我那样做,缩放会自动小于 100%。
所以,我认为页面的缩放导致了这个问题。但我无法解决这个问题。你能帮帮我吗?
尝试通过删除 'screen' 并将 'max-device-width' 更改为 'max-width' 并将 'min-device-width' 更改为 'min-width'[=11= 来将媒体查询更改为更简单的内容]
@media (max-width: 1199px) {
#content-id {
height: 480px !important;
background: rgb(16, 25, 100);
width: 99%;
border-radius: 5px;
margin-top: 0px;
max-height: 30%;
}
}
@media (min-width: 1200px) {
#content-id {
height: 580px !important;
background: rgb(124, 57, 57);
width: 99%;
max-height: 30%;
}
}
max-device-width 和 min-device-width 已在媒体查询 4 中弃用,您正在针对固定的设备宽度进行测试,因此永远不会应用其中一种样式。尝试使用 max-width 而不是普通屏幕不需要媒体查询
@media (max-width: 1199px) {
#content-id {
height: 480px !important;
background: rgb(16, 25, 100);
width: 99%;
border-radius: 5px;
margin-top: 0px;
max-height: 30%;
}
}
#content-id {
height: 580px !important;
background: rgb(124, 57, 57);
width: 99%;
max-height: 30%;
}
您可以在以下位置查看有关媒体查询的更多信息:https://learnjsx.com/category/1/posts/mediaQueries