Media-Query min-width在指定的最小宽度以下不工作

Question

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

@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;
  }
}