對于移動端的開發，橫屏和豎屏的布局是非常重要的一個方面。在制作完網頁的基本結構后，CSS 起到了一個重要的作用，決定了頁面的外觀和風格。在這些樣式中，關于橫屏和豎屏的樣式很容易被忽視，但是它們是非常重要的。

在查看網頁時，我們通常希望它們能夠自動調整布局以適應不同的設備，這就是響應式設計的基本原則。而橫屏和豎屏的樣式就是在不同的屏幕方向下，調整布局的途徑之一。

/* 橫屏樣式 */
@media screen and (orientation: landscape) {
/* 在這里添加橫屏下的樣式 */
}
/* 豎屏樣式 */
@media screen and (orientation: portrait) {
/* 在這里添加豎屏下的樣式 */
}

在以上代碼中，使用 @media 查詢和orientation 屬性為橫屏和豎屏分別設置了樣式。它們都是與 screen(屏幕) 相關的，表示只有在屏幕符合條件時才會應用樣式。orientation 屬性則是設置頁面的方向，landscape 為橫屏，portrait 為豎屏。

在橫屏樣式中，我們可以將一些元素水平排列，提高頁面的利用率。在豎屏樣式中，則可以使布局更緊密，使網頁更加易于閱讀。這些樣式可以使你的頁面更加具有人性化，讓用戶使用起來更加舒適方便。

如果你正在開發移動端的網頁，不要忘記考慮橫屏和豎屏的樣式。使用以上代碼，為不同的屏幕方向分別設置樣式，可以讓你的頁面更加完善和舒適。