@media是css3中新定義的，功能非常強大，顧名思義pc是無法匹配橫豎屏的，所以orientation只對移動裝置起效。
1.頭部宣告
複製**
**如下:
加到複製**
**如下:
2. media匹配螢幕是橫屏還是豎屏
複製**
**如下:
@media all and (orientation : landscape)
} @media all and (orientation : portrait)
} 3. 應用的地方
（1）手機web頁面元素內容一般都是通過百分比定義的，以便能夠在不同解析度裝置下都能正常顯示，雖然這樣，但是移動裝置的螢幕解析度寬度和高度相差還是很大，同樣的頁面在螢幕翻轉過來時可能百分比定義的元素寬度會變得非常大，這樣就會失去頁面的美觀性，這樣，如果用orientation匹配螢幕的翻轉狀態，就可以寫不同的css加以控制頁面樣式。
（2）對於有背景圖的移動web頁面，可以根據orientation匹配螢幕螢幕狀態，設定不同的background。
（3）稍微有技術的一點：某些有絕對定位元素的web頁面，將某元素定位到頁面底部，當螢幕是豎屏狀態時，可能因為頁面總長度小於螢幕高度(但是大於螢幕寬度)，這時將絕對定位元素定位到底部是正確的，但是當螢幕翻轉成為橫屏時，此時因為頁面內容高度大於螢幕高度(就是未翻轉時螢幕寬度)，絕對定位元素會覆蓋在頁面內容之上，導致頁面出現問題，這時可用orientation匹配螢幕狀態，調整css**。
關於匹配螢幕橫豎屏狀態還可通過js判斷，js中onorientationchange是window的乙個事件，可以通過監聽事件匹配螢幕橫豎屏。
CSS3判斷手機橫屏豎屏
原理 當使用者旋轉螢幕的時候，會進入到你的監聽方法中，然後通過window.orientation來獲取當前螢幕的狀態 0 豎屏 90 逆時針旋轉橫屏 90 順時針旋轉橫屏 180 豎屏，上下顛倒 如果你不希望使用者使用橫屏方式檢視你的網頁，你可以在裝置旋轉時間監聽裡面對body使用css3裡面的t...
橫屏豎屏切換
當用n85 n95的時候，可以橫屏豎屏切換。當切換的時候，就要把程式中的控制項位置 大小重新計算，重新畫了。其實也沒有什麼困難的。1.這根據原始螢幕 240 320 的螢幕計算座標。當橫屏豎屏切換的時候，可以用下面的公式進行自動的拉伸。define calc wh a a rect width 24...
手機豎屏和橫屏旋轉解決
function recalc transform origin left top 0px background size 100 100 transform scale 縮放屬性 transform origin x,y 用來設定元素的運動的基點 必須在transform屬性作用下面起作用 bac...