Блог

Главная - Вопросы по программированию - Медиазапросы CSS не работают при заданном значении максимальной ширины (но вместо этого начинают работать при меньшем значении)

Медиазапросы CSS не работают при заданном значении максимальной ширины (но вместо этого начинают работать при меньшем значении)

#css #media-queries #width

#css #медиа-запросы #ширина

Вопрос:

Так что это уже некоторое время сбивает меня с толку. Я установил конкретный медиазапрос на (max-width:480px) . Проблема в том, что когда мой экран находится немного ниже 480px , CSS не работает. Однако, примерно 370px , он внезапно начинает работать. Кто-нибудь, кто может помочь объяснить, почему это происходит с моим кодом?

 @import url("https://fonts.googleapis.com/css2?family=Robotoamp;display=swap");

* {
    box-sizing: border-box;
}

body {
    font-family: "Roboto", sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
    margin: 0;
}

.container {
    display: flex;
    width: 90vw;
}

.panel {
    background: no-repeat center center/cover;
    flex: 0.5;
    height: 80vh;
    border-radius: 50px;
    position: relative;
    margin: 10px;
    transition: flex 0.3s ease;
    cursor: pointer;
}

.panel h3 {
    font-size: 24px;
    color: #fff;
    position: absolute;
    left: 10%;
    bottom: 10%;
    opacity: 0;
}

.container div:first-child {
    background-image: url(/assets/ales-krivec-4miBe6zg5r0-unsplash.jpg);
}

.container div:nth-child(2) {
    background-image: url(/assets/bailey-zindel-NRQV-hBF10M-unsplash.jpg);
}

.container div:nth-child(3) {
    background-image: url(/assets/ken-cheung-KonWFWUaAuk-unsplash.jpg);
}

.container div:nth-child(4) {
    background-image: url(/assets/luca-bravo-zAjdgNXsMeg-unsplash.jpg);
}

.container div:last-child {
    background-image: url(/assets/pietro-de-grandi-T7K4aEPoGGk-unsplash.jpg);
}

.panel.active {
    flex: 5;
}

.panel.active h3 {
    opacity: 1;
    transition: opacity 0.3s ease-in;
}

@media (max-width: 480px) {
    .container {
        width: 100vw;
    }

    .panel:nth-of-type(4),
    .panel:nth-of-type(5) {
        display: none;
    }
} 
 <body>
    <div class="container">
        <div class="panel active">
            <h3>All you gotta do is call</h3>
        </div>
        <div class="panel">
            <h3>Winter</h3>
        </div>
        <div class="panel">
            <h3>Spring</h3>
        </div>
        <div class="panel">
            <h3>Summer</h3>
        </div>
        <div class="panel">
            <h3>Fall</h3>
        </div>
    </div>
    <script src="./js/app.js"></script>
</body>

Большое спасибо за руководство!

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

1. Во-первых, я предлагаю вам указать .panel цвет фона, чтобы люди могли помочь, во-вторых, для меня это работает отлично

2. 4-й и 5-й дочерние элементы точно скрыты при 480px и ниже, то же самое для .container ширины.

3. Я тестировал на последних версиях (Chrome, FireFox и Edge)

4. Это так странно. Я обновил свой Chrome, и теперь он работает нормально. Спасибо!!!