Блог

Главная - Вопросы по программированию - функция @media не отвечает при попытке изменить высоту div

функция @media не отвечает при попытке изменить высоту div

#html #css

#HTML #css

Вопрос:

Я пытаюсь изменить высоту определенного div.
Каким-то образом div получает высоту по умолчанию 964 пикселей. Когда я пытаюсь изменить высоту, используя style: height:40vw; внутри тега div, это работает просто отлично, но когда я использую функцию @media без стиля, это не работает. Я имею в виду div с классом и идентификатором родительского контейнера. Вот мой код:
HTML

 <div class="content">
    <div class="parent-container" id="parent-container" style="position: relative;top: 0;">
        <div id="video-container"
             style="z-index: -1; min-height: 100%;min-width: 100%; position: absolute; top: 0;left: 0; transition-delay: 500ms;overflow-y: hidden">
            <video class="fade-in" autoplay loop muted
                   style="min-width:100%;max-height:100% ;position: fixed; left: 0; top: 0; object-fit: fill;">
                <source id="mp4" src="images/video.mp4" type="video/mp4">
                <p>Your user agent does not support the HTML5 video elemnt</p>
            </video>
        </div>
        <div class="videoRGBA">
            <img src="images/brush.png" style="position: relative; top: 15vw; left: 50px">
            <div style="position: relative; top: 0.8vw;">
                NOT RELEVANT
            </div>
        </div>
    </div>

CSS

 @media only screen and (min-width 427px){
    .parent-container{
      height: 100vw;
    }
}
@media only screen and (min-width 0px) and (max-width 426px){
    .parent-container{
        height:90vw;
    }
}

Thanks.

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

1. Вы меняете css в медиа-запросе. Вы просматриваете вывод на любом мобильном устройстве??

2. Я не понимаю вашего вопроса.

3. Вы просматриваете вывод на ноутбуке или мобильном устройстве??

4. Оба. В настоящее время на ноутбуке, но я использую ctrl shift c для проверки вывода на каждом типе экрана.

Ответ №1:

Я пропустил «:» в медиа-запросе. вместо

 @media only screen and (min-width 427px){
    .parent-container{
      height: 100vw;
    }
}
@media only screen and (min-width 0px) and (max-width 426px){
    .parent-container{
        height:90vw;
    }
}

Просто изменен на:

 @media only screen and (min-width :427px){
    .parent-container{
      height: 100vw;
    }
}
@media only screen and (min-width: 0px) and (max-width: 426px){
    .parent-container{
        height:90vw;
    }
}