html - 为什么我的 CSS 响应规则没有被应用？

问题描述

我正在研究我的网页的响应能力，并且我的所有内容都在.contentSectiondiv 中。当屏幕尺寸为 414px（移动尺寸）时，我遇到了问题。屏幕如下所示：

如您所见，有很多重叠，让我感到困惑的是我有一个@media应该解决此问题的查询：

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

但是在网络检查器中，您可以看到规则没有被应用：

它在屏幕尺寸为 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;
    }
}

标签： htmlcss

html - 为什么我的 CSS 响应规则没有被应用？

问题描述

解决方案

试试下面的代码，我提供了具体的分辨率，你可以根据你的要求放。

推荐阅读