CSS是網頁設計中的重要一環，可以控制網頁的布局、樣式和動態效果。但是在不同設備上顯示網頁時，有時候會出現布局錯亂、樣式失真等問題，尤其是在橫向和縱向方向上的適配問題更加復雜。下面就來介紹一下CSS在不同設備上的橫向縱向的處理方法。

一、PC端橫向適配

@media (max-width: 1024px) {
body {
width: 100%;
overflow-x: hidden;
}
}

在PC端，由于窗口大小的不同，網頁寬度也隨之改變。如何使頁面在不同的寬度下保持一定布局呢？可以使用CSS中的@media查詢語句進行控制。例如，以上代碼中的媒體查詢樣式表將頁面在寬度小于1024px時，將頁面寬度設置為100%，并隱藏頁面的橫向滾動條，實現了PC端的橫向適配。

二、移動端橫向適配

@media (max-width: 480px) {
body {
width: 100%;
overflow-x: hidden;
}
}

在移動端，由于終端屏幕的尺寸較小，網頁寬度也隨之改變。為了保證在不同尺寸的終端上，頁面能夠保持一定的布局，我們同樣采用@media查詢語句進行控制。與PC端橫向適配相似，這里將寬度小于480px的終端的頁面寬度也設置為100%，并隱藏橫向滾動條，實現了移動端的橫向適配。

三、移動端縱向適配

html {
font-size: 18px;
}
@media (max-width: 640px) {
html {
font-size: 14px;
}
}
@media (max-width: 480px) {
html {
font-size: 12px;
}
}

在移動端，由于終端屏幕較小，字體大小的選擇也需要注意。使用相同的字體大小，可能在不同尺寸的終端上顯示效果不同。因此，我們可以在CSS中設置html標簽的字體大小，并使用@media查詢語句在不同尺寸的終端上控制字體大小。以上代碼中，將網頁在480px和640px下的字體大小設置為12px和14px，從而解決了移動端的縱向適配問題。

總的來說，CSS在不同設備上的橫向縱向適配對于網頁設計至關重要。通過以上的介紹，我們可以更好地掌握如何使用CSS解決不同設備的橫向縱向適配問題，從而更好地提升用戶體驗。