Question

我正在为网页编写媒体查询，并设法编写480px及更多的媒体查询。但是当我为320px编写媒体查询时，它无法正常工作。我想拍摄320px的大部分手机（iphone4，iphone5，iphone3，asus galaxy 7，samsung galaxy sII，samsung galaxy s3）的纵向视图。我创建的网页正在使用这些设备中的横向视图，但不会缩放纵向视图。任何人都可以指出查询中的错误。这是我用过的媒体查询。

@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 */
}

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

Answer 1

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

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

Answer 2

<强> A

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

B

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

使用上述内容，考虑320px视口。

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

决定

向 B 添加min-width:321px要求会强制B为320px视口测试false - 因此字体大小将保持在0.1em，直到B变为真（最小宽度为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 }
}

媒体查询320px及更少

2 个答案: