CSS寬度按屏幕比例，是指在CSS中通過指定百分比的方式，讓元素的寬度隨著屏幕尺寸的變化而自適應調整。

/*將元素寬度設為屏幕的50%，可以使用以下代碼*/
.example{
width: 50%;
}

在實際應用中，我們經常將頁面分為若干個區域，通過設定這些區域的寬度百分比，可以實現響應式布局。比如下面這個例子：

/*定義頭部區域寬度為100%，高度為50px*/
.header{
width: 100%;
height: 50px;
}
/*定義內容區域為80%寬度，高度隨內容自適應*/
.content{
width: 80%;
overflow: hidden; /* 為了防止內容過多時出現滾動條，可以將overflow設為hidden*/
}
/*定義底部區域寬度為100%，高度為50px*/
.footer{
width: 100%;
height: 50px;
}

上面的例子中，頭部和底部區域的寬度均設為100%，就會自適應占據整個屏幕寬度；而內容區域的寬度設為80%，那么在屏幕寬度變化時，內容區域的寬度也會隨之變化。

當需要在不同屏幕尺寸下顯示不同的布局和內容時，可以使用媒體查詢，根據屏幕寬度進行條件判斷，設定不同的CSS樣式。比如下面這個例子：

/*當屏幕寬度小于等于767px時，將內容區域寬度改為100%*/
@media screen and (max-width: 767px) {
.content{
width: 100%;
}
}

在上面的例子中，當屏幕寬度小于等于767px時，CSS樣式里的.content會被覆蓋成新的值，也就是100%的寬度。