应用于全尺寸页面的 CSS 媒体查询答案

【问题标题】：css media query applying to full size page应用于全尺寸页面的 CSS 媒体查询
【发布时间】：2018-09-11 08:49:38
【问题描述】：

我在我的页面上使用媒体查询来获取较小的屏幕，但它在页面为全尺寸时应用。当页面为全尺寸时，我在5rem 有h1，但它显示在2.5rem 中。提前谢谢你。

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：