為什么我的 CSS 響應規則沒有被應用？

Question

我正在研究我的網頁的響應能力，我的所有內容都在.contentSection div 中。 當屏幕尺寸為 414px（移動尺寸）時，我遇到了問題。 屏幕如下所示：

正如你所看到的有很多重疊，讓我感到困惑的是我有一個@media查詢應該解決這個問題：

@media only screen and (max-width: 415px) {
    .contentSection {
        width: 400px;
    }
}

但是在 web 檢查器中，您可以看到沒有應用該規則：

它在屏幕尺寸為 614xp 時應用規則：

@media only screen and (max-width: 614px) {
    .contentSection {
        width: 500px;
    }
}

在 web 檢查器的源選項卡中，您可以看到規則存在：

這是我的完整 CSS 文件：

/* -------- Side Menu Section -------- */
@media only screen and (max-width: 375px) {
    .menuLogo {
        width: 60%;
        margin-block-start: 30px;
        margin-block-end: 10px;
    }

    .sidebar {
        width: 375px;
    }

    .sidebar ul a {
        line-height: 65px;
        font-size: 17px;
        color: white;
        padding-left: 30px;
    }
}

@media only screen and (max-width: 320px) {
    .menuLogo {
        width: 55%;
        margin-block-start: 30px;
        margin-block-end: 10px;
    }

    .sidebar {
        width: 320px;
    }

    .sidebar ul a {
        line-height: 65px;
        font-size: 17px;
        color: white;
        padding-left: 30px;
    }
}

/* -------- Header Section -------- */
@media only screen and (max-width: 830px) {
    .header {
        background-image: linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.5)), url("blue-back.jpg");
        background-size: cover;
        background-position: center;
        position: relative;
        margin-block-end: 50px;
    }
}

@media only screen and (max-width: 700px) {
    .navBar {
        width: 100%;
        height: 100px;
        display: flex;
        align-items: center;
    }

    .logoContainer {
        width: 30%;
        float: left;
        margin-inline-start: 5%;
        margin-inline-end: 5%;
    }

    .menuContainer {
        width: 60%;
        float: left;
        text-align: right;
        margin-inline-end: 20px;
    }

    .menuBars {
        font-size: 25px;
        cursor: pointer;
    }

    .MobileMasteryTitle {
        width: 380px;
    }
}

@media only screen and (max-width: 550px) {
    .header {
        background-image: linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.5)), url("blue-back.jpg");
    }

    .navBar {
        width: 100%;
        height: 100px;
        display: flex;
        align-items: center;
    }

    .logoContainer {
        width: 30%;
        float: left;
        margin-inline-start: 20px;
    }

    .menuContainer {
        width: 60%;
        float: left;
        text-align: right;
        margin-inline-end: 20px;
    }

    .menuBars {
        font-size: 20px;
        cursor: pointer;
    }

    .MobileMasteryTitle {
        width: 350px;
    }
}

@media only screen and (max-width: 375px) {
    .MobileMasteryTitle {
        width: 300px;
    }
}

@media only screen and (max-width: 320px) {
    .MobileMasteryTitle {
        width: 270px;
    }
}

/* -------- Content Section -------- */
@media only screen and (max-width: 1220px) {
    .contentSection {
        width: 1100px;
    }
}

@media only screen and (max-width: 1113px) {
    .contentSection {
        width: 1000px;
    }
}

@media only screen and (max-width: 1000px) {
    .contentSection {
        width: 870px;
    }
}

@media only screen and (max-width: 880px) {
    .contentSection {
        width: 790px;
    }
}

@media only screen and (max-width: 790px) {
    .contentSection {
        width: 600px;
    }
}

@media only screen and (max-width: 614px) {
    .contentSection {
        width: 500px;
    }
}

@media only screen and (max-width: 415px) {
    .contentSection {
        width: 400px;
    }
}

@media only screen and (max-width: 320px) {
    .contentSection {
        width: 300px;
    }
}


/* -------- Cart Items Section -------- */
@media only screen and (max-width: 1220px) {
    .cartItemHolder {
        height: 148.5px;
    }

    .cartItem {
        height: 148.5px;
    }

    .cartProductImg {
        height: 148.5px;
    }

    .cartProductInfo {
        height: 148.5px;
    }
}

@media only screen and (max-width: 1113px) {
    .cartItemHolder {
        height: 135px;
    }

    .cartItem {
        height: 135px;
    }

    .cartProductImg {
        height: 135px;
    }

    .cartProductInfo {
        height: 135px;
    }
}

@media only screen and (max-width: 1000px) {
    .cartItemHolder {
        height: 117.44px;
    }

    .cartItem {
        height: 117.44px;
    }

    .cartProductImg {
        height: 117.44px;
    }

    .cartProductInfo {
        height: 117.44px;
    }

    .removeContainer {
        width: 10%;
    }

    .quantityContainer {
        width: 70%;
    }

    .quantity {
        margin: auto;
    }
}

@media only screen and (max-width: 880px) {
    .cartItemHolder {
        height: 106.64px;
    }

    .cartItem {
        height: 106.64px;
    }

    .cartProductImg {
        height: 106.64px;
    }

    .cartProductInfo {
        height: 106.64px;
    }


    .productTitle {
        margin-block-end: 1px;
        font-size: 19px;
    }

    .productLogo {
        width: 60%;
    }

    .removeContainer {
        width: 10%;
    }

    .quantityContainer {
        width: 70%;
    }

    .quantity {
        width: 70%;
        margin: auto;
    }
}

@media only screen and (max-width: 790px) {
    .contentSection {
        width: 600px;
    }

    .cartItemHolder {
        width: 100%;
        float: left;
        margin-block-end: 40px;
    }

    .cartItemHolder {
        height: 162px;
    }

    .cartItem {
        height: 162px;
    }

    .cartProductImg {
        height: 162px;
    }

    .cartProductInfo {
        height: 162px;
    }


    .productTitle {
        margin-block-end: 10px;
        font-size: 19px;
    }

    .productLogo {
        width: 37%;
    }

    .removeContainer {
        width: 10%;
    }

    .quantityContainer {
        width: 70%;
    }

    .quantity {
        width: 80%;
        margin: auto;
    }
}

@media only screen and (max-width: 614px) {
    .contentSection {
        width: 450px;
    }

    .cartItemHolder {
        height: 121.5px;
    }

    .cartItem {
        height: 121.5px;
    }

    .cartProductImg {
        height: 121.5px;
    }

    .cartProductInfo {
        height: 121.5px;
    }


    .productTitle {
        margin-block-end: 10px;
        font-size: 20px;
    }

    .productLogo {
        width: 37%;
    }

    .removeContainer {
        width: 10%;
    }

    .quantityContainer {
        width: 70%;
    }

    .quantity {
        width: 80%;
        margin: auto;
    }

    .headingContainer h1 {
        font-size: 23px;
    }

    .headingContainer h3 {
        font-size: 16px;
    }
}


@media only screen and (max-width: 400px) {
    .contentSection {
        width: 320px;
    }

    .cartItemHolder {
        height: 86px;
    }

    .cartItem {
        height: 86px;
    }

    .cartProductImg {
        height: 86px;
    }

    .cartProductInfo {
        height: 86px;
    }


    .productTitle {
        margin-block-end: 4px;
        font-size: 13px;
    }

    .productLogo {
        width: 60%;
    }

    .removeContainer {
        width: 10%;
    }

    .quantityContainer {
        width: 70%;
    }

    .quantity {
        width: 70%;
        margin: auto;
    }

    .headingContainer h1 {
        font-size: 20px;
    }

    .headingContainer h3 {
        font-size: 10px;
    }

    .headingContainer {
        width: 100%;
        text-align: center;
        margin-block-end: 30px;
    }
}

Answer 1

我發現了這個錯誤的問題，我在 CSS 文件中進一步重新聲明了@media規則，當它被刪除時它起作用了

Answer 2

試試下面的代碼，我提供了具體的分辨率，你可以根據你的要求放。

@media (min-width:1366px) and (max-width:1920px){
                    //your css  
     }
                   
      @media (min-width:1024px) and (max-width:1365px){
    
                        //your css
      }
                   
    @media (min-width:320px) and (max-width:1023px){
        //your css
    }