在我們的移動時代中，我們的設備不僅有多個不同大小的屏幕，而且還有不同的方向。為了使我們的網站在所有情況下都具有相同的用戶體驗，我們需要為不同的設備方向編寫 CSS。

CSS 提供了一種稱為媒體查詢的技術，可根據不同的設備屏幕寬度和高度以及方向定義不同的樣式。最常用的媒體查詢是針對設備寬度，它通常稱為響應式設計。但是我們也可以針對設備方向編寫 CSS。

/* 在設備處于縱向屏幕方向時應用的樣式 */
@media screen and (orientation: portrait) {
/* 在此處添加您的縱向屏幕樣式 */
}
/* 在設備處于橫向屏幕方向時應用的樣式 */
@media screen and (orientation: landscape) {
/* 在此處添加您的橫向屏幕樣式 */
}

如上所示，我們可以使用 @media 查詢中的 orientation 屬性來針對設備方向編寫 CSS 樣式。在方括號中，我們指定我們想要應用樣式的屏幕方向。對于橫向屏幕方向的設備，我們使用landscape參數，而對于縱向屏幕方向的設備，我們使用portrait參數。

CSS 橫向屏幕樣式的編寫可以讓我們在設計移動端網站的時候更加具有自由度。我們可以根據橫向屏幕的特點可以在界面中添加更多的樂趣和創意。