媒體查詢320px及更少

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

一種

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

乙

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

使用上面的內容，考慮一個320px的視口。

A和B都是正確的 ，因為320達到A的極限並且遠遠低於B的最大值。但是由於B通過在樣式表中稍后聲明而覆蓋A，因此字體大小由后面的聲明決定--B

向B添加min-width:321px要求會強制B為320px視口測試假 - 因此字體大小將保持在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 }
}