html - 媒体查询最小宽度在指定的最小宽度以下不起作用

Question

我正在使用指定最小宽度为 480 像素的媒体查询。媒体查询在 480px 下工作，但是当我将屏幕缩放到 480px 以下时，媒体查询停止工作。我不确定为什么会这样。我认为使用 min-width 媒体查询的目的是使样式规则在指定的 min-width 以下的所有尺寸都生效。

@media only screen and (min-width : 480px) {
   .preview-title{
     font-size: 28px;
   }
}

@media only screen and (min-width : 768px) {

  .preview-title{
   font-size: 38px;
  }
}

Answer 1

min-width 表示查询将发生的最小宽度。您正在寻找 max-width。

@media only screen and (max-width : 480px) {
   .preview-title{
     font-size: 28px;
   }
}

@media only screen and (max-width : 768px) {

  .preview-title{
   font-size: 38px;
  }
}