CSS-媒体查询被忽略

Question

我正在使用Firefox检查我的网站是否对电话响应。 我设置了一个媒体查询：@media screen and (max-width: 731px)，并在Firefox中放入了731px。结果：考虑了740px的媒体查询。

但是，当我编写640px的媒体查询并在Firefox中设置640px时，这是可行的。

@media screen and (max-width:740px) {
    #title {
        font-size: 2.7em;
    }
    #description {
        font-size: 0.6em;
        top: -38px;
    }
    .fab {
        font-size: 1.2em;
    }
    #artstation a {
        margin-bottom: -3px;
        height: 18px;
        width: 18px;
    }
    #artstation a:hover {
        margin-bottom: -3px;
        height: 18px;
        width: 18px;
    }
    #links {
        margin-top: -27px;
    }
    input[type="text"],
    input[type="email"],
    textarea {
        width: 100%;
        padding: 0px;
        border-bottom: 1px solid #ddd;
        margin-bottom: 10px;
        font: 12px Roboto;
        height: 20px;
    }
    textarea {
        resize: none;
        overflow: hidden;
    }
    input[type="text"] {
        width: 40%;
        margin-left: 30%;
    }
    input[type="email"] {
        width: 60%;
        margin-left: 20%;
    }
    input[type="submit"] {
        margin-top: px;
        padding: 2px 20px;
        border: 1px #686868 solid;
        border-width: 2px;
        border-radius: 3px;
        font: 12px Roboto;
    }
    input[type="submit"]:hover {
        background-size: 100% 100%;
        color: #FFF;
    }
    #right {
        font-size: 3.7em;
    }
    #left {
        font-size: 3.7em;
    }
    #footer a {
        font-size: 0.6em;
    }
    #footer p {
        font-size: 0.6em;
    }
    #cv-image {
        width: 690px;
    }
    #arrow-cv img {
        height: 45px;
        margin-left: 20px;
    }
    #description-art {
        font-size: 1.8em;
    }
    #arrow-art-back img {
        height: 45px;
        margin-right: 20px;
    }
    #arrow-art-up img {
        margin-left: 20px;
    }
}

@media screen and (max-width: 731px) {
    #title {
        font-size: 2.5em;
    }
    #description {
        font-size: 0.65em;
    }
    .fab {
        font-size: 1.3em;
    }
    #artstation a {
        margin-bottom: -3px;
        height: 19px;
        width: 20px;
    }
    #artstation a:hover {
        margin-bottom: -3px;
        height: 19px;
        width: 20px;
    }
    input[type="text"],
    input[type="email"],
    textarea {
        width: 100%;
        padding: 0px;
        border-bottom: 1px solid #ddd;
        margin-bottom: 10px;
        font: 14px Roboto;
        height: 24px;
    }
    textarea {
        resize: none;
        overflow: hidden;
    }
    input[type="text"] {
        width: 40%;
        margin-left: 30%;
    }
    input[type="email"] {
        width: 60%;
        margin-left: 20%;
    }
    input[type="submit"] {
        margin-top: 5px;
        padding: 2px 20px;
        border: 1px #686868 solid;
        border-width: 2px;
        border-radius: 3px;
        font: 14px Roboto;
    }
    input[type="submit"]:hover {
        background-size: 100% 100%;
        color: #FFF;
    }
    #right {
        font-size: 3.5em;
    }
    #left {
        font-size: 3.5em;
    }
    #footer a {
        font-size: 0.6em;
    }
    #footer p {
        font-size: 0.6em;
    }

    #cv-image {
        width: 680px;
    }

    #arrow-cv img {
        height: 45px;
        margin-left: 20px;
    }

    #description-art {
        font-size: 1.8em;
    }

    #arrow-art-back img {
        height: 45px;
        margin-right: 20px;
    }
    #arrow-art-up img {
        margin-left: 20px;
    }
}

@media screen and (max-width: 640px) {
    #title {
        font-size: 2.2em;
    }
}