CSS媒体查询与最大/最小宽度不完全匹配

这是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）开始，然后逐渐减小浏览器的宽度，直到元素大约为0时，才会应用第一个媒体查询。1209px宽。我希望它将在宽度变为1224px时立即应用。同样，直到大约955px而不是970px才应用下一个。我已经在chrome和firefox中测试了此行为。

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