媒體查詢爲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 */ 
} 

但他們都不是working.Am我做錯什麼/失去了一些東西？ 在此先感謝

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

使用上述，考慮一個320像素的視口。

A和B是真正，爲320擊中的極限和B的最大下降到低於很好，但由於B通過後在樣式表中被宣佈將覆蓋A，字體大小由決定後來聲明 - B

添加min-width:321px要求乙將強制B測試假爲320像素視口 - 使字體大小會留在0.1em直到比成爲真（中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 } 
}