CSS可以幫助我們實現手機版網頁布局的自適應，不論是豎屏還是橫屏，網頁都可以自適應屏幕大小，提升用戶體驗。

然而，當手機被旋轉至橫屏時，網頁布局可能需要進行額外的優化。以下是一些技巧來幫助您針對橫屏方向進行CSS設計。

1. 為橫屏應用特定樣式

在您的CSS中，您可以使用@media查詢來針對橫屏設計專用的樣式。例如：

@media only screen and (orientation: landscape) {
/* 在橫屏方向下應用的樣式 */
body {
background-color: lightblue;
}
}

2. 優化文本布局

在橫屏方向下，頁面的文本可能會變得更寬，因此您需要計劃一下文本布局以確保易于閱讀。例如：

/* 為橫向文本設置最大寬度 */
@media only screen and (orientation: landscape) {
body {
max-width: 100%;
}
}

3. 確保響應式圖像尺寸

使用響應式圖像可以確保您的網頁也能在橫屏下看起來很棒。為確保圖像在橫屏模式下具有正確的尺寸，您可以考慮在CSS中應用以下樣式：

/* 設置初始圖像大小 */
img {
max-width: 100%;
height: auto;
}
/* 當屏幕為橫屏時，圖像最大寬度為屏幕寬度的80% */
@media only screen and (orientation: landscape) {
img {
max-width: 80%;
}
}

總之，良好的CSS設計可以確保您的網站布局在橫屏和豎屏時都具有優良的表現。如果您在手機橫屏布局上遇到了問題，使用以上技巧可以幫助您輕松應對。