媒体查询会以不应包含的视口尺寸继续应用

Question

我有一个有关媒体查询的问题，可以使您的网站更具响应性。

似乎网站开发人员模式无法正确识别宽度：

.container {
    width: 100%;
    height: 100px;

    @media screen and (min-width: 1274px) {
        height: 290px;
    }

    @media screen and (min-width: 892px) {
        height: 250px;
    }

    text-transform: uppercase;
    & .full-name {
        font-size: 5rem;
        position: absolute;
    }
    & .job-name {
        padding: 6rem 0rem 0rem 0rem;
        position: absolute;
    }

当我缩小到300px-450px宽度的电话尺寸时，它仍然显示页面使用的最小宽度为892px，并且划掉了100px。

是否有更好的方法来掌握媒体查询？