CSS媒體查詢

我正在嘗試改編我的平板電腦網絡應用程序以便在手機上使用。媒體查詢功能看起來很完美，我最初的測試證明了這一點。我的問題是：手機和平板電腦的方向從縱向改爲橫向（設備旋轉時），最大寬度指的是什麼？CSS媒體查詢

換句話說，更大的Android手機的分辨率與480x800相當，iPhone4的分辨率爲640x960，原始黑莓手機的分辨率爲360x480。當設備處於縱向模式時，這些都是分辨率（寬x高），因此寬度分別爲400,640和360。但是，當您將設備旋轉到橫向時，高度'變爲'用於顯示目的的寬度。因此，景觀中的有效寬度分別變爲800,960和480，而800和960的寬度與平板寬度的寬度重疊，從而使顯示器混亂。

那麼，寬度總是寬度？也就是說，當設備報告其尺寸時，寬度值是否始終與CSS目的保持一致，或者當設備旋轉到橫向時寬度值是否更改？

感謝大家提前。

來源

2012-01-21 robert smith

當然，它剛剛改變了人們的方式可以改變在PC上的屏幕分辨率？ –

當設備翻轉時，寬度值將會改變，因爲正在查看的頁面的寬度也會發生變化。

如果您想查詢是否該設備在橫向或縱向模式下使用，您可以使用方向屬性，而不是：

@media screen and (orientation: portrait) { 
}

這將檢查如果瀏覽器窗口的寬度比越大高度（方向：風景將會相反）。爲了獲得最佳結果，您可能需要使用'and'運算符來結合使用多個MQ屬性來鏈接測試。即：

@media screen and (orientation: landscape) and (max-width: 960px) { 
}

MQ屬性的完整列表可用here。

來源

2012-01-23 19:06:00 1nfiniti

另一點可能有所幫助 - 寬度實際上是瀏覽器窗口的寬度。設備寬度是設備屏幕的寬度。設備翻轉時寬度和設備寬度都會改變，但設備寬度會計算屏幕的寬度，而寬度將計算瀏覽器視口的面積（屏幕減去滾動條或瀏覽器的菜單欄）。 – 1nfiniti

感謝您的答案，他們幫助。 –

當手機或平板電腦旋轉時，css的值會根據手機的風景變化或不變，因爲移動電話上顯示的寬度和高度發生變化。所以當你定義css風格來定位你想要的東西時你必須具體。

@media（最小寬度：700像素）和（方向：橫向）{

}

用於媒體查詢詳細理解訪問：http://letsdopractice.com/css-media-queries/

來源

2015-05-21 18:09:42

-5

的媒體查詢被用來定義風格針對不同的屏幕尺寸。我會告訴你關於媒體查詢的基本知識。 CSS媒體查詢的語法是：

@media not|only mediatype and (media feature) { 
CSS-Code; 
}

有關詳細的有關媒體查詢語法toturial請訪問This Site

來源

2015-12-29 15:01:57 Sajid

這不是問題的答案。 – jcaron

我給了一個普遍的答案。這可能對其他人有幫助。 – Sajid

回答

相關問題