卡在使用媒体查询

Question

我正在制作一个网站，完成后，我申请了 @media 但我运行遇到了问题。

在我的徽标或任何我运行上使用 @media 之后，但是 chrome 没有检测到 @media。然后为了解决这个问题，我制作了一个运行dom 页脚并在其上应用了 @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>

在此正文是媒体的代码中，该代码无法正常工作。但是我创建的虚拟页脚在那里工作。 St运行ge.

}
.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 是虚拟页脚媒体在那里工作

没有错误。

Answer 1

因为.quote更具体。阅读更多 here

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

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

卡在使用媒体查询

Stuck in using media query

html

css

media-queries