如何使用CSS3來匹配橫屏豎屏

這篇文章主要講解了“如何使用CSS3來匹配橫屏豎屏”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“如何使用CSS3來匹配橫屏豎屏”吧！

寫在同一個CSS中
 
CSS Code復制內容到剪貼板

1. @media screen and (orientation: portrait) {   

2.   /*豎屏 css*/  

3. }    

4. @media screen and (orientation: landscape) {   

5.   /*橫屏 css*/  

6. }  

分開寫在2個CSS中
豎屏
 

CSS Code復制內容到剪貼板

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

橫屏
 

CSS Code復制內容到剪貼板

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

應用的地方

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

（2）對于有背景圖的移動WEB頁面，可以根據orientation匹配屏幕屏幕狀態(tài)，設置不同的background。

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

關于匹配屏幕橫豎屏狀態(tài)還可通過JS判斷，js中onorientationchange是window的一個事件，可以通過監(jiān)聽事件匹配屏幕橫豎屏。

感謝各位的閱讀，以上就是“如何使用CSS3來匹配橫屏豎屏”的內容了，經過本文的學習后，相信大家對如何使用CSS3來匹配橫屏豎屏這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！