匹配橫屏或者豎屏css程式碼例項

使用手機的朋友都會知道，同一個網站或者其他應用在橫屏或者豎屏的時候顯示是不一樣的。

下面就分享一下如何讓頁面能夠匹配網站的橫屏或者豎屏。

畢竟橫屏和豎屏差距是很大的，所以需要根據不同的螢幕狀態設定不同的樣式。

一.在一個css程式碼中:

[CSS] 純文字檢視 複製程式碼
@media screen and (orientation:portrait){
  /*豎屏 css*/
}     
@media screen and (orientation: landscape){
  /*橫屏 css*/
}

二.引入不同的檔案:

[HTML] 純文字檢視 複製程式碼
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">

上面的方式適用於豎屏。

[HTML] 純文字檢視 複製程式碼
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

上面的方式適用於橫屏。