CSS的橫屏和豎屏設置非常重要，對于網站、手機應用等用戶界面的設計都有著重要的影響。在不同的屏幕方向下，網頁的排版和布局都需要做出相應的調整。下面我們就來看一下如何使用CSS來實現橫屏和豎屏的設置。

/* 豎屏設置 */
@media screen and (orientation: portrait) {
/* 豎屏下的css樣式*/
body {
font-size: 16px;
}
}
/* 橫屏設置 */
@media screen and (orientation: landscape) {
/*橫屏下的css樣式*/
body {
font-size: 20px;
}
}

在上述代碼中，我們使用了@media規則，其中orientation屬性用于判斷屏幕的方向，portrait表示豎屏，landscape表示橫屏。在不同的屏幕方向下，我們可以通過CSS來調整字體大小、排版方式、布局等，以達到更好的顯示效果。

需要注意的是，橫屏和豎屏設置并不是瀏覽器默認自帶的，需要通過CSS來進行調整。此外，由于不同的設備和瀏覽器對于橫屏和豎屏的判斷方式可能不一樣，我們需要仔細測試并調整代碼，以確保在各種設備和瀏覽器中都能夠正確顯示。