利用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的一個事件，可以透過監聽事件來匹配螢幕橫豎螢幕。

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：

CSS3和jQuery實作跟隨滑鼠方位的Hover特效

CSS的table-layout屬性的用法

#

以上是利用CSS3來搭配橫屏豎屏的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！