Блог

Главная - Вопросы по программированию - Почему мое правило реагирования на CSS не применяется?

Почему мое правило реагирования на CSS не применяется?

#html #css

#HTML #css — код

Вопрос:

Я работаю над отзывчивостью моей веб-страницы, и у меня есть весь мой контент в .contentSection div. У меня возникла проблема, когда размер экрана равен 414 пикселей (мобильный размер). Экран выглядит так:

введите описание изображения здесь

Как вы можете видеть, есть много совпадений, что меня смущает, так это то, что у меня есть @media запрос, который должен это исправить:

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

Но в веб-инспекторе вы можете видеть, что правило не применяется:

введите описание изображения здесь

Оно применяет правило, когда размер экрана 614xp:

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

На вкладке источники в веб-инспекторе вы можете увидеть, что это правило существует:

введите описание изображения здесь

Вот мой полный файл 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;
    }
}

Комментарии:

1. В качестве альтернативного предложения, почему бы вам не установить max-width: 100% or 100vw для вашего элемента? Тогда он никогда не должен быть больше, чем окно просмотра, и вам не нужно устанавливать размер для 100 точек останова по отдельности?

2. @cloned Это хорошая идея! Спасибо!

Ответ №1:

Попробуйте приведенный ниже код, я предоставил конкретное разрешение, которое вы можете указать в соответствии с вашими требованиями.

 @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
    }

Ответ №2:

Я обнаружил проблему с этой ошибкой, я повторно @media объявлял правило дальше в файле CSS, и когда это было удалено, оно сработало