利用CSS3來匹配橫屏豎屏的方法

這篇文章主要介紹了使用CSS3來匹配橫屏豎屏的簡單方法,主要使用到了CSS3中新加入的@media,需要的朋友可以參考下

寫在同一個CSS中

@media screen and (orientation: portrait) {     /*豎屏 css*/  }    @media screen and (orientation: landscape) {     /*橫屏 css*/  }

分開寫在2個CSS中
豎屏

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">

橫屏

<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

應用的地方

（1）手機WEB頁面元素內容一般都是通過百分比定義的，以便能夠在不同解析度裝置下都能正常顯示，雖然這樣，但是行動裝置的螢幕解析度寬度和高度相差還是很大，同樣的頁面在螢幕翻轉過來時可能百分比定義的元素寬度會變得非常大，這樣就會失去頁面的美觀性，這樣，如果用orientation匹配螢幕的翻轉狀態，就可以寫不同的css加以控制頁面樣式。

（2）對於有背景圖的移動WEB頁面，可以根據orientation匹配螢幕螢幕狀態，設定不同的background。

（3）稍微有技術的一點：某些有絕對位置元素的WEB頁面，將某元素定位到頁面底部，當螢幕是豎屏狀態時，可能因為頁面總長度小於螢幕高度(但是大於螢幕寬度)，這時將絕對位置元素定位到底部是正確的，但是當螢幕翻轉成為橫屏時，此時因為頁面內容高度大於螢幕高度(就是未翻轉時螢幕寬度)，絕對位置元素會覆蓋在頁面內容之上，導致頁面出現問題，這時可用orientation匹配螢幕狀態，調整css代碼。

關於匹配螢幕橫豎屏狀態還可通過JS判斷，js中onorientationchange是window的一個事件，可以通過監聽事件匹配螢幕橫豎屏。

以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！