Застрял в использовании медиа-запроса - PullRequest
Новая
       4

Застрял в использовании медиа-запроса

1 голос
/ 15 апреля 2020

Я делал сайт, и после его завершения мне подали @media, но я столкнулся с проблемой.

После использования @media на моем lo go или чем-либо, что я запускаю, но chrome не обнаруживает @media. Затем, чтобы решить эту проблему, я сделал случайный нижний колонтитул и применил к нему @media. Я установил шрифт меньше, и он работал нормально.

Почему он не работает над телом или заголовком? 

<!-- body -->
<div class="body">
<section class="body-left">
  <p class="left-text">SEE YOURSELF BY. <br> <span>VANITY FAIR</span></p>
<video autoplay loop src="img/video.mp4">
</video>
</section>
<section class="body-right">
  <p class="right-text"><span class="quote">"</span><br>I may be a beginner at some things, <br> but I've got a black belt in shopping. <br> — Phyllis Nefler </p>
<img src="img/female.jpg" alt="sdf" class="female">
</section>
</div>
<!-- end body -->
<footer>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</footer>
</body>
</html>

В этом коде, где тело является носителем, там не работает. но там работает подделка, которую я создал. Странно. 

}
.quote{
  font-size: 50px;
  font-family:'Playfair Display', sans-serif;
}


/* body section right */
 p{
  width: 100%;
  height: 30vh;
  font-size: 40px;
}
@media all and (max-width:1000px) {
p{
  font-size: 20px;
}

}

В этом примере не работает носитель в кавычке (тело справа)

, и p, который является фиктивным носителем нижнего колонтитула, работает там

Там ошибок нет.

1 Ответ

1 голос
/ 15 апреля 2020

Это потому, что .quote более конкретно c. Подробнее здесь

Вы можете использовать тот же класс в медиа-запросе: 

@media all and (max-width:1000px) {
   .quote {
      font-size: 20px;
   }    
}
...