隨著智能手機的普及，越來越多的人通過手機瀏覽網頁。但是，與傳統的電腦屏幕大小相比，手機屏幕大小有限，這使得許多網頁在手機上瀏覽時顯示效果不佳。為了解決這個問題，我們可以使用CSS來根據手機屏幕大小調整網頁的寬度。

@media screen and (max-width: 480px) {
/* 在小于 480px 的屏幕上設置寬度為 100% */
body {
width: 100%;
}
}

以上代碼使用了CSS中的媒體查詢（media query）功能。媒體查詢可以根據不同的媒體類型和特定的條件來應用不同的樣式。在這里，我們使用了max-width屬性，并設置為480px，意味著在寬度小于或等于480像素的屏幕上應用此樣式。我們還將body元素的寬度設置為100%，這樣就可以讓網頁的寬度自適應手機屏幕。

在編寫響應式設計時，除了調整寬度，我們還可以編寫其他CSS規則來適應不同的屏幕大小。例如，可以使用flexbox和網格布局來調整網頁的布局，或者使用媒體查詢來隱藏或顯示某些元素。

綜上所述，通過CSS根據手機調整網頁的寬度是一種有效的解決方案，可以使網站在移動設備上的顯示效果更好。如果您想要進一步學習響應式設計，請查看Bootstrap等響應式框架或教程。