隨著移動設備和電腦屏幕的不斷升級，網頁制作者們需要面對的一個挑戰就是如何實現響應式布局，讓網頁在各種不同寬度的屏幕上都能夠良好地顯示。而 CSS 中的高隨著寬度變就是其中一種解決方案。

.box {
width: 50%;
height: auto;
padding-bottom: 50%;
background-color: #ccc;
}

在上面的代碼中，我們設置了一個 class 為 box 的 div，先設置寬度為 50%，再用 padding-bottom 屬性來讓高度隨著寬度變化。其中，padding-bottom 的值為寬度值的一半，這是因為 padding 使用百分比時是以父元素寬度為基準的。

這樣設置之后，當設備屏幕寬度改變時，box 的高度也會跟著自適應變化，從而保持一個固定的寬高比例。當然，如果有其他的 margin、border 等屬性，也需要結合具體的實際情況來調整。

此外，我們還可以使用兼容性更好的方式，即使用 vw 和 vh 單位來代替百分比。因為 vw 和 vh 單位用來表示相對于視窗寬度或高度的百分比，可以更加精確地控制元素的大小。

.box {
width: 50vw;
height: 50vw;
background-color: #ccc;
}

在上面的代碼中，我們設置了一個寬度為視口寬度的一半，高度也為視口寬度的一半的 div。這樣無論屏幕寬度如何變化，該元素的寬高比例也會始終保持一致。

綜上所述，在響應式布局的實現中，CSS 中的高隨著寬度變是一種非常實用和方便的技巧。