CSS3自適應橫豎屏是響應式網頁設計中一個非常重要的方面，在移動設備上的使用率越來越高，所以必須提供一個優秀的體驗。好的自適應橫豎屏設計能夠使我們的網頁在所有的設備上都能夠工作的良好。

旋轉是一件很常見的事情，我們的網頁必須能夠準確響應設備方向的改變，背景、字體、圖片、尺寸以及其他風格的變化都必須能夠很好地轉換。下面我們就來看看如何使用CSS3實現自適應橫豎屏效果。

/* 橫向布局 */
@media screen and (orientation:landscape) { 
.page {
width: 100%;
height: 50%;
display: flex;
flex-direction: row;
}
}
/* 豎向布局 */
@media screen and (orientation:portrait) { 
.page {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
}

可以看到，在CSS3中我們通過@media screen來定義自適應布局。并且我們根據設備的orientation值來切換不同的布局，@media只有當條件為真時才會生效。

當我們需要橫向布局的時候，我們需要設置寬度為100%，高度為50%，同時在display中設置flex屬性并指定row，來讓內容水平排列。當我們需要豎向布局的時候，我們仍然需要寬度100%，高度100%，并且在display中設置flex屬性并指定column，來使內容垂直排列。

有了這個簡單的CSS，我們就可以非常容易地實現自適應橫豎屏的布局，讓我們的網頁在不同設備上的顯示效果更加出色。