隨著移動互聯網的普及和智能手機的廣泛使用，越來越多的網站需要同時在PC和移動設備上展示，這就需要我們使用 CSS 自適應技術來滿足各種不同屏幕的需求。

@media screen and (max-width: 768px) {
/* 在移動設備上展示的樣式 */
}
@media screen and (min-width: 769px) {
/* 在PC端展示的樣式 */
}

通過媒體查詢來判斷不同的屏幕寬度，確定展示不同的樣式，可以在不同平臺上實現較為一致的展示效果。

在移動設備上展示時，我們需要考慮以下幾個方面：

/* 設置頁面寬度等于設備寬度，禁止縮放 */
html,body {
width: 100%;
overflow-x: hidden;
}
meta[name="viewport"] {
width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no;
}

首先是設置頁面寬度等于設備寬度，避免出現橫向滾動條和縮小頁面的情況，同時禁止用戶進行縮放。這可以通過設置 meta 標簽來實現。

/* 圖片自適應 */
img {
max-width: 100%;
height: auto;
display: block;
}

圖片也需要進行自適應，設置最大寬度為 100% 時，在不同屏幕等比例縮放，保證圖片在不同平臺上顯示效果基本一致。

在PC上展示時，我們需要考慮以下幾個方面：

/* 寬度自適應 */
.wrapper {
width: 80%;
margin: 0 auto;
}

在 PC 上展示時，我們需要考慮寬度自適應的問題。此時需要將頁面寬度限制在一個相對固定的范圍內，以免過度拉伸和過度壓縮導致頁面效果失真。我們可以使用百分比或 rem 單位進行設置，如設置為 80%，再加上居中設置，可以保證在不同平臺上展示效果良好。

CSS 自適應技術已經成為了當前響應式設計的標配，熟練掌握 CSS 自適應技術可以提高網站在不同平臺上的展示效果，更好地服務于用戶，提升用戶體驗。