320px 及以下的媒体查询答案

【问题标题】：media query for 320px and less320px 及以下的媒体查询
【发布时间】：2013-03-18 09:01:45
【问题描述】：

我正在为一个网页编写一个媒体查询，并设法为 480 像素及更多像素编写媒体查询。但是当我为 320px 编写媒体查询时，它不能正常工作。我想捕捉大多数手机（iphone4、iphone5、iphone3、华硕银河 7、三星银河 sII、三星银河 s3）的纵向视图，它是 320 像素。我创建的网页在这些设备中使用横向视图，但不适用于纵向视图。任何人都可以指出查询中的错误。这是我使用的媒体查询。

@media (max-width: 320px)
{
   html
   {
      font-size:0.1em;
   }

}
@media (max-width: 480px)
{
   html
   {
      font-size:0.20em;
   }
}
@media (max-width: 767px)
{
   html
   {
          font-size:0.38em;
   }
}
@media (min-width: 768px) and (max-width: 979px)
   {
       html
       {
           font-size:0.65em;
       }
   }

   @media (min-width : 980px) and (max-width:1025px)
   {
       html
       {
           font-size:0.7em;
       }
   }

对于 320px，我也尝试过

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : portrait)
{ /*Styles */}

和

@media only screen 
and (max-width : 320px) {
/* Styles */
}

但是它们都不起作用。我做错了什么/遗漏了什么吗？提前致谢

【问题讨论】：

标签： html css media-queries

【解决方案1】：

一个

@media (max-width: 320px)
{
   html { font-size:0.1em; }
}

@media (max-width: 480px)
{
 html { font-size:0.20em; }
}

使用上述方法，考虑一个 320 像素的视口。

A 和 B 是 true，因为 320 达到了 A 的限制并且远低于 B 的最大值。但是由于 B 通过稍后在样式表，字体大小由后面的声明决定——B

向 B 添加min-width:321px 要求将强制 B 测试 320px 视口的 false ——因此 font-size 将保持在 0.1em 直到 B 变为 true（最小宽度为 321px）。

编辑（也许是更好的思考方式）
与其使用 max、max、max，不如利用 min-width，直到您找到一个最适合使用范围（如平板电脑）的 UI

/* Set a base */
html { font-size:62.5% }

/* iPhone landscape range */
@media (min-width:321px) and (max-width:480px) {
    html { font-size:1.2em }
}

/* larger than iPhone landscape, an in the iPad portrait range */
@media (min-width:481px) and (max-width:768px) {
    html { font-size:1.6em }
}

/* bigger than iPad portrait  */
@media (min-width:769px) {
    html { font-size:2em }
}

【讨论】：

【解决方案2】：

由于您的 480 样式没有最小宽度，并且由于这些样式稍后出现在您的样式表中，它们会覆盖您放在它们之前的任何内容。

@media (max-width: 320px) {
   html {
      font-size:0.1em;
   }
}
@media (min-width: 321px) and (max-width: 480px) {
   html {
      font-size:0.20em;
   }
}
   ...

【讨论】：