媒体屏幕和最大宽度答案

【问题标题】：media screen and max width媒体屏幕和最大宽度
【发布时间】：2014-12-21 10:45:34
【问题描述】：

我对媒体查询了解不多，但我想尝试做出响应式divs。我为一些分辨率设置了 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，则始终读取 width:56%（最后一个样式行）

我错过了什么？

【问题讨论】：

标签： html css media-queries

【解决方案1】：

移动优先 - 如果您首先使用移动，则永远不需要 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%;}

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

@AleksandarStojanovic 甜蜜！不要忘记将答案标记为后代的正确答案：-P

【解决方案3】：

你应该恢复它们（从高到低）：

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

【讨论】：