2

我正在为网页编写媒体查询，并设法为 480px 及更多内容编写媒体查询。但是当我为 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 */
}

但他们都没有工作。我做错了什么/错过了什么吗？提前致谢

4

2 回答 2

10

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

@media (max-width: 320px) {
   html {
      font-size:0.1em;
   }
}
@media (min-width: 321px) and (max-width: 480px) {
   html {
      font-size:0.20em;
   }
}
   ...
于 2013-03-28T02:48:59.077 回答
2

一种

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

乙 

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

使用上面的方法，考虑一个 320px 的视口。

A 和 B是true，因为 320 达到 A 的限制并且远低于 B 的最大值。但是由于 B 通过稍后在样式表中声明来覆盖 A，字体大小由后面的声明决定 - 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 }
}
于 2013-03-28T03:09:23.620 回答