@media是css3中新定義的，功能非常強大，顧名思義PC是無法匹配橫豎屏的，所以orientation只對移動設備起效。
1.頭部聲明
復制代碼
代碼如下:
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0">
加到
復制代碼
代碼如下:
<head></head>
2. media匹配屏幕是橫屏還是豎屏
復制代碼
代碼如下:
@media all and (orientation : landscape) { </p> <p>/* 這是匹配橫屏的狀態，橫屏時的css代碼 */
body {
}
}
@media all and (orientation : portrait){ </p> <p>/* 這是匹配豎屏的狀態，豎屏時的css代碼 */
body {
background-color: #00ff00;
}
}
3. 應用的地方
（1）手機WEB頁面元素內容一般都是通過百分比定義的，以便能夠在不同分辨率設備下都能正常顯示，雖然這樣，但是移動設備的屏幕分辨率寬度和高度相差還是很大，同樣的頁面在屏幕翻轉過來時可能百分比定義的元素寬度會變得非常大，這樣就會失去頁面的美觀性，這樣，如果用orientation匹配屏幕的翻轉狀態，就可以寫不同的css加以控制頁面樣式。
（2）對於有背景圖的移動WEB頁面，可以根據orientation匹配屏幕屏幕狀態，設置不同的background。
（3）稍微有技術的一點：某些有絕對定位元素的WEB頁面，將某元素定位到頁面底部，當屏幕是豎屏狀態時，可能因為頁面總長度小於屏幕高度(但是大於屏幕寬度)，這時將絕對定位元素定位到底部是正確的，但是當屏幕翻轉成為橫屏時，此時因為頁面內容高度大於屏幕高度(就是未翻轉時屏幕寬度)，絕對定位元素會覆蓋在頁面內容之上，導致頁面出現問題，這時可用orientation匹配屏幕狀態，調整css代碼。
關於匹配屏幕橫豎屏狀態還可通過JS判斷，js中onorientationchange是window的一個事件，可以通過監聽事件匹配屏幕橫豎屏。