現今，隨著越來越多的人在移動設備上使用互聯網，開發人員為了讓網頁在不同設備上也可以有良好的展示效果，引入了CSS自適應寬度的概念。

//CSS代碼樣例
@media only screen and (max-width:720px){
.container{
width:90%;
margin:auto;
}
}
@media only screen and (min-width:720px){
.container{
width:720px;
margin:auto;
}
}

在上述代碼中，我們使用了@media查詢，根據不同的屏幕大小來設置容器的寬度。當屏幕寬度小于720px時，容器的寬度調整為90%，并且居中顯示；當屏幕寬度大于或等于720px時，容器的寬度設置為720px，并且同樣居中顯示。通過這樣的代碼設置，我們可以保證在不同尺寸的設備上，頁面的展示效果都非常棒。

當然，CSS自適應寬度不僅僅只是局限于容器的寬度，我們同樣可以通過設置元素的最大和最小寬度來實現自適應效果。

//CSS代碼樣例
.demo{
width:100%;
max-width:720px;
min-width:320px;
margin:auto;
}

通過上述代碼，我們為元素指定了一個100%寬度的基礎寬度，并設置了max-width和min-width來限制元素的寬度范圍，從而實現自適應效果。當設備屏幕大小在320px至720px之間時，元素的寬度將自適應屏幕大小，同樣保證頁面展示效果的良好性。

CSS自適應寬度是響應式Web設計的一個重要概念，通過使用它，我們可以讓頁面在不同尺寸的設備上有良好的展示效果，更好地提升用戶的體驗。