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或ANY，则始终读取宽度：56％（最后一个样式行） 我错过了什么？

Answer 1

你应该还原它们（从高到低）：

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

Answer 2

基本上您的代码所说的是＆＃34;如果它是屏幕的大小，请执行此操作直到达到最大宽度。由于您的最小值是屏幕大小，因此您的上一个媒体查询将覆盖所有以前的媒体查询。

如果您需要对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% }
   }

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

Answer 3

移动优先 - 如果您先移动设备，则永远不需要max-width。

/* this code will be in effect unless from 0px width */
    div#zarada p {width:100%; font-size: 14px;}
  .zaradabox img {display:none;}


@media screen and (min-width:768px) {
/* this code will be in effect from 768px width and up */
    div#zarada p {width:38%;  font-size: 14px;}
}

@media screen and (min-width:1024px) {
/* this code will be in effect from 1024px width and up */
    div#zarada p {width:38%; }
}

@media screen and (min-width:1280px) {
/* this code will be in effect from 1280px width and up */
    div#zarada p {width:39%; }
}

@media screen and (min-width:1366px) {
/* this code will be in effect from 1366px width and up */
    div#zarada p {width:42%;}
}

@media screen and (min-width:1440px) {
/* this code will be in effect from 1440px width and up */
    div#zarada p {width:46%; }
}

@media screen and (min-width:1536px) {
/* this code will be in effect from 1536px width and up */
    div#zarada p {width:48%; }
}

@media screen and (min-width:1600px) {
/* this code will be in effect from 1600px width and up */
    div#zarada p {width:50%; }
}

@media screen and (min-width:1680px) {
/* this code will be in effect from 1680px width and up */
    div#zarada p {width:56%; }
}

此外，您应该始终使用;结束css行。例如
p {width:50%;}

媒体屏幕和最大宽度

3 个答案: