CSS的自適應百分比是在網頁設計中非常重要的一部分。它可以幫助網頁在不同的屏幕分辨率和設備之間適應，從而提供更好的用戶體驗。本文將介紹CSS自適應百分比的基本原理和如何使用它實現自適應布局。

.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}

上面的代碼是一個典型的容器，其中max-width屬性限制了容器的最大寬度為1200像素。這意味著如果屏幕分辨率大于1200px，容器的寬度將保持在1200px。如果屏幕分辨率小于1200px，容器的寬度會自動調整到適應屏幕寬度。

.img {
width: 100%;
height: auto;
}

當需要在網頁中插入圖片時，可以使用上面的代碼。設置圖片的寬度為100%，高度為自動調整。這樣可以使圖片根據屏幕大小自適應，而不會出現變形。

@media screen and (max-width: 600px) {
.container {
width: 100%;
max-width: none;
}
}

雖然我們已經設置了容器的最大寬度為1200像素，但是在一些小屏幕設備上可能仍然會有問題。我們可以使用@media查詢來針對不同的設備設置不同的樣式。上面的代碼將在屏幕寬度小于600像素時取消最大寬度限制，使容器可以自適應屏幕寬度。

總之，在網頁設計中，使用CSS自適應百分比能夠使網頁在不同的屏幕分辨率和設備之間始終看起來協調美觀。它是網頁設計的必備技能之一。