陷入使用媒体查询的困境

Question

我正在制作一个网站，完成后，我收到了申请，@media但遇到了问题。在我的徽标或任何东西上使用后@media，我运行它，但 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;}}在此示例中，引用（body-right）上的媒体不起作用p 是虚拟页脚媒体，正在那里工作没有错误。

Answer 1

其原因.quote是更具体。

您可以在媒体查询中使用相同的类：

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