Web頁面在不同設備上的呈現效果往往不同。對于移動設備來說，由于屏幕尺寸和分辨率等因素的差異，我們必須對樣式做出適配。下面我們來介紹一些CSS技巧來幫助你優化移動端的用戶體驗。

第一步是設置viewport。 viewport是指瀏覽器窗口中用于顯示網頁的區域，通俗來說就是設備屏幕上用于顯示網頁的區域。為了確保你的頁面在移動設備上具有良好的縮放表現，你需要在HTML文件中設置viewport。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

這段代碼告訴瀏覽器不要縮放頁面，而是根據設備寬度自動調整頁面寬度。

接下來是利用CSS媒體查詢來適配不同設備。媒體查詢是一種根據設備特性來應用樣式的技術。我們可以通過媒體查詢來為不同設備添加css規則，從而讓頁面在不同設備上有不同的呈現樣式。

@media screen and (max-width: 480px) {
body {
background-color: #ccc;
}
}

這段代碼意味著，當視口寬度小于或等于480像素時，背景顏色將變為灰色。

最后是使用相對單位來設置樣式。使用百分比，em，rem等相對單位可以使頁面布局更加靈活。這樣，樣式的大小可以根據設備的屏幕大小來自適應縮放，不會因為屏幕尺寸不同而影響用戶體驗。

.container {
width: 80%;
margin: 0 auto;
}

這段代碼中容器的寬度被設置為80%。

以上是適配移動端的三種技巧，當然還有其他的技巧可以使用。移動設備的網頁通常需要更多的考慮和精細的調整，只有通過實踐和不斷的嘗試，才能更好地適配移動端。