CSS媒體查詢 - 設備寬度 - 肖像VS景觀

Question

我有如下疑點：

1）設備是否-寬度媒體查詢相匹配，根據模式的改變（縱向橫向VS）？

2）通常的筆記本電腦和臺式機是否符合縱向模式？對於沒有屏幕旋轉的設備，方向是隨機的還是未定義的？或者它總是在邏輯上對應於肖像（如果高度爲<寬度）和風景（寬度爲<高度）。

問候

JP

Answer 1

1）好，是的，它確實在大多數情況下，考慮下面的例子：

@media all and (max-device-width: 400px) { 
    // styles here 
} 

現在，當屏幕是您的樣式只適用400px寬或更少。設備是否在縱向或橫向模式確實不是事。

但是在iOS中出現問題。設備寬度始終爲320px（iPhone），或者768px爲iPad。因此，您需要使用orientation媒體查詢，否則您將無法判斷用戶是否改變了方向。

2）筆記本和臺式機相匹配landscape模式作爲默認（但你可以改變瀏覽器manually）的方向模式。由於iOS的使用案例是orientation，因此您可以確定沒有隨機/未定義的方向。

這裏是CSS3媒體查詢一個很好的工具：http://cssmediaqueries.com/

更多閱讀：

• http://blog.cloudfour.com/ipad-orientation-css/
• http://tech.bluesmoon.info/2011/01/device-width-and-how-not-to-hate-your.html
• http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
• http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml

Answer 2

我建議使用最小或最大寬度。使用設備佈局會導致問題，因爲有數十萬設備，每個設備的分辨率稍有不同。

據我所知，計算機不呈現佈局模式。

@media screen and (max-width: 420px) { 
//styles 
} 

@media screen and (min-width: 420px) { 
//styles 
} 

最好是使用媒體查詢（最小寬度），其中每個寬度元素添加規則的樣式時使用移動第一種方法。這將防止重複的規則和寫作。它還允許較老的瀏覽器優雅的瀏覽器回退。