隨著移動設備的普及，如今很多人都用手機來訪問網頁。但是，在某些情況下，手機訪問網頁可能會有一些問題。其中一種常見的問題是網頁的布局在手機上顯示不正常。這個問題是由于手機屏幕的大小和分辨率與桌面電腦不同所導致的。因此，我們需要使用CSS來解決這個問題。

首先，我們需要了解CSS的一些基本概念，如“媒體查詢”和“流動布局”。

媒體查詢是指根據不同的設備來選擇不同的CSS樣式。我們可以使用以下代碼在CSS中設置媒體查詢：

@media only screen and (max-width: 600px) {
/* 這里是針對手機設備的CSS樣式 */
}

其中，max-width表示設備的最大寬度。在這個例子中，我們針對最大寬度為600像素的設備設置了CSS樣式。

流動布局是指根據設備的寬度來自動調整網頁的布局。我們可以使用以下代碼在CSS中設置流動布局：

.container {
width: 100%;
padding: 10px;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
}
.item {
width: calc(33.33% - 20px);
margin: 10px;
text-align: center;
}

在這個例子中，我們使用了flexbox布局，并將容器的寬度設置為100%。為了讓容器內的元素自動適應設備的寬度，我們將每個元素的寬度設置為calc(33.33% - 20px)，其中20px是元素之間的間距。

最后，我們需要注意以下幾點：

• 盡可能使用相對單位（如em和rem）來設置CSS樣式。
• 避免使用絕對單位（如px）和硬編碼數值。
• 盡可能縮小文件大小，以提高加載速度。

通過使用CSS的媒體查詢和流動布局，我們可以讓網頁在手機上顯示得更加完美。如果你正在開發一個移動設備優先的網頁，這些技術將對你非常有用。