CSS橫豎屏布局調整是一種調整網頁排版的方法，可以讓網頁在不同屏幕方向下顯示完美的布局。當用戶旋轉設備或將設備從縱向旋轉到橫向時，網頁布局會自動調整以適應新的屏幕方向。

/* 豎屏樣式 */
@media screen and (orientation: portrait) {
body {
width: 90%;
margin: auto;
font-size: 14px;
}
}
/* 橫屏樣式 */
@media screen and (orientation: landscape) {
body {
width: 100%;
max-width: 800px;
font-size: 16px;
display: flex;
flex-direction: row;
}
.left-column {
width: 50%;
padding-right: 10px;
}
.right-column {
width: 50%;
padding-left: 10px;
}
}

上述代碼中，我們針對不同屏幕方向設置了不同的CSS樣式。在豎屏模式下，網頁的寬度為90%，居中顯示，并設置了一個合適的字體大小。在橫屏模式下，我們使用了flex布局，將整個頁面分為左右兩列，每個列的寬度為50%，并在它們之間添加了10px的空白。這樣可以保證在寬屏設備上，頁面看上去更加美觀和舒適。