CSS媒体查询应用于完整页面

Question

I'm using media queries on my page for smaller screens but it's applying when the page is in full size. when the page is in full size I have the h1 at 5rem but it shows in 2.5rem . Thank you in advance.

@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 for bigger screen. For smaller screen use max-width

Answer 2

specify screen to your css media query and also use max-width and not min-width

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