在進行網頁設計過程中，往往需要使用CSS對元素進行高寬的設置。然而，在不同的設備上展示網頁時，元素的高寬比例可能會失衡，影響用戶的視覺體驗。因此，在對元素的高寬進行設置時，我們可以使用CSS的按比例設置高寬功能，使得在不同設備上展示時，元素的高寬比例始終保持一致。

.width-50{
width:50%
}
.height-50{
height:50%
}
.square{
width:50%;
padding-bottom:50%;
height:0;
}

我們可以通過設置元素的高度為0，padding-bottom為一個比例值（如50%），來實現元素高寬比例的按比例設置。padding-bottom值的計算方式為：元素寬度 x 比例值。這樣，在不同設備上展示時，元素的高度會按照設置的比例自動進行縮放，保持高寬比例不變。

此外，我們還可以使用純CSS的方式來實現一個等比例的正方形。例如，我們可以將元素的寬度和padding-bottom值都設置為50%，并將元素的高度設置為0，就可以實現一個邊長為元素寬度一半的正方形。這樣，不論在何種設備上展示，該正方形的高寬比例始終為1:1。

總之，CSS的按比例設置高寬功能在網頁設計中非常實用，可以幫助我們在不同設備上展示時保持元素高寬比例的穩定性和美觀性。