CSS寬度自適應是一種非常重要的技術，可以讓我們的網頁在不同大小的屏幕上都能夠呈現出較為舒適的閱讀體驗。然而，不同電腦屏幕的尺寸和分辨率各不相同，如何實現寬度自適應呢？下面我們就來探討一下。

body {
width: 100%; /* 設置寬度為百分比 */
max-width: 1200px; /* 設置最大寬度為1200像素 */
margin: 0 auto; /* 居中顯示 */
}

如上代碼所示，通過將頁面的寬度設置為百分比，可以實現頁面寬度隨屏幕變化而變化。同時，設置一個最大寬度，可以防止頁面在大屏幕上過分擴展，導致閱讀不便。

另外，需要注意的是，在設計頁面時應該盡可能地避免使用固定寬度的元素，而應該使用百分比或者em單位來設置寬度。這樣，即使頁面元素在各種大小的屏幕上顯示，也能夠保持相對的比例。

img {
max-width: 100%; /* 圖片自適應 */
height: auto; /* 防止圖片變形 */
}

除了頁面整體寬度的自適應，圖片的自適應也是一個很重要的方面。通過設置圖片最大寬度為100%，就可以保證圖片隨屏幕寬度的變化而變化。此外，設置圖片高度為auto，能夠防止圖片被壓縮變形。

綜上所述，通過合理地運用CSS技術，可以實現頁面寬度的自適應，從而在不同尺寸的屏幕上為用戶提供更好的閱讀體驗。