css媒体查询适用于完整大小的页面

Question

我在我的网页上使用媒体查询来查看较小的屏幕，但是当页面为完整尺寸时它会应用。当页面为完整尺寸时，h1位于5rem，但会显示在2.5rem中。提前谢谢。

@media (min-width: 375px) {
  .container {
      padding: 0 2rem 0 2rem;
  }
  .container h1 {
      font-size: 2.5rem;
  }
}

Answer 1

@media (max-width: 375px) {
  .container {
      padding: 0 2rem 0 2rem;
  }
  .container h1 {
      font-size: 2.5rem;
  }
}

更大的屏幕

min-width 。对于较小的屏幕，请使用 max-width

Answer 2

为您的css媒体查询指定screen，并使用max-width而不是min-width

@media screen and (max-width: 375px) {
  .container {
      padding: 0 2rem 0 2rem;
  }
  .container h1 {
      font-size: 2.5rem;
  }
}