Question

这是CSS：

@media only screen and (min-width : 971px) and (max-width : 1224px) {
    main #titlebox{
        height: 300px;
    }
}

@media only screen and (min-width : 785px) and (max-width : 970px) {
    main #titlebox{
        height: 250px;
    }
}

@media only screen and (max-width : 784px) {
    main #titlebox{
        height: 225px;
    }
}

问题是，在调整浏览器大小时，未按预期应用媒体查询。例如，从浏览器开始非常宽（> 1300px）然后慢慢减小浏览器的宽度，第一个媒体查询在元素为大约之前不会应用。宽1209像素。我希望它会在宽度变为1224px后立即应用。同样，直到大约955px而不是970px才会应用下一个，依此类推。我已经在chrome和firefox中测试过这种行为。

Answer 1

在浏览器中检查缩放级别。在Firefox中，您的缩放级别会影响您的网页，但不会影响开发工具中显示的屏幕尺寸。

CSS媒体查询不能精确匹配最大/最小宽度

1 个答案: