html - 媒体屏幕和最大宽度

Question

我不太了解媒体查询，但我想尝试制作响应式 div。我为某些分辨率设置了 div:

@media screen and (max-width: 768px) {
  div#zarada p {
    width: 100%;
    font-size: 14px;
  }
  .zaradabox img {
    display: none;
  }
}
@media screen and (max-width: 1024px) {
  div#zarada p {
    width: 38%;
    font-size: 14px;
  }
}
@media screen and (max-width: 1280px) {
  div#zarada p {
    width: 38%;
  }
}
@media screen and (max-width: 1366px) {
  div#zarada p {
    width: 39%;
  }
}
@media screen and (max-width: 1440px) {
  div#zarada p {
    width: 42%;
  }
}
@media screen and (max-width: 1536px) {
  div#zarada p {
    width: 46%;
  }
}
@media screen and (max-width: 1600px) {
  div#zarada p {
    width: 48%;
  }
}
@media screen and (max-width: 1680px) {
  div#zarada p {
    width: 50%;
  }
}
@media screen and (max-width: 1920px) {
  div#zarada p {
    width: 56%;
  }
}

但是如果显示1024x600px或任何，始终读取 width:56%(最后一行样式)

我错过了什么？

Answer 1

本质上，您的代码所说的是“如果它是屏幕的尺寸，则执行此操作直到达到最大宽度。由于您的最小值是屏幕尺寸，因此您最后的媒体查询将覆盖之前的所有媒体查询。

如果您需要对 div 进行此类特定处理，请在处理中指定最小宽度。例如

   @media  only screen and (max-width:768px) {
   div#zarada p {width:100%; font-size: 14px;}
   .zaradabox img {display:none;}
   }
   @media only screen and  (min-width:769px) and (max-width:1024px) {
   div#zarada p {width:38%;  font-size: 14px;}
   }
   @media only screen and (min-width:1025px) and (max-width:1280px) {
   div#zarada p {width:38% }
   }
   @media  only screen and (min-width:1281px) and (max-width:1366px) {
   div#zarada p {width:39% }
   }

等祝你好运，让我知道它是如何工作的!