CSS是網頁設計中非常重要的一部分。眾所周知，在各種不同的設備上訪問網頁，屏幕尺寸和顯示效果都是不同的。這時候就需要使用CSS進行屏幕自適應調整了。

寬度自適應是最為常見的一種自適應方式。就是通過CSS設置寬度百分比，讓頁面布局隨著屏幕大小的變化而自動調整。下面是一個例子：

.container {
width:80%; /* 設置container占屏幕80%寬度 */
margin:0 auto; /* 水平居中 */
}

上述代碼設置了一個類名為.container的元素寬度占屏幕80%寬度，并通過margin:0 auto;的方式實現水平居中。這樣，無論在什么尺寸的屏幕下，這個元素都會以80%的寬度占滿屏幕，并且保持水平居中的位置。

除了寬度自適應之外，還有一種方式是使用@media查詢來實現針對不同屏幕尺寸的不同樣式布局。這種方式需要用到一些媒體查詢的語法，具體用法如下：

@media screen and (max-width:768px) {
/* 當屏幕寬度小于等于768px時 */
.container {
width:100%; /* 寬度占屏幕100% */
margin:0; /* 取消左右margin */
}
}

上述代碼使用@media查詢，當屏幕寬度小于等于768px時，容器元素class為.container將會占滿屏幕100%寬度，并且取消左右margin。這種方式會根據屏幕寬度自動顯示不同的樣式布局，從而達到屏幕自適應的效果。

總之，CSS寬度屏幕自適應是網頁設計中非常重要的一部分。通過寬度自適應和@media查詢的方式，可以使網頁在不同的設備屏幕上都擁有良好的顯示效果。