在網(wǎng)頁(yè)布局中，常常需要設(shè)置元素的寬高比，以適配不同的設(shè)備和分辨率。而使用js設(shè)置css寬高比，是一種簡(jiǎn)單有效的方法。

下面的示例代碼演示了如何使用js設(shè)置一個(gè)元素的寬高比，同時(shí)優(yōu)化窗口大小改變時(shí)的響應(yīng)：

function setAspectRatio(elementSelector, ratio) {
const element = document.querySelector(elementSelector);
if (element) {
element.style.width = element.offsetHeight * ratio + 'px';
window.addEventListener('resize', function() {
element.style.width = element.offsetHeight * ratio + 'px';
});
}
}
// 調(diào)用示例
setAspectRatio('.box', 16/9);

從代碼中可以看到，setAspectRatio函數(shù)接受兩個(gè)參數(shù)：元素選擇器和寬高比。首先，函數(shù)使用querySelector方法查找匹配元素，并計(jì)算出元素應(yīng)有的寬度值。然后，將元素的寬度設(shè)置為該值，并在窗口大小改變時(shí)重新計(jì)算寬度。

需要注意的是，此函數(shù)僅適用于寬高比固定的元素。如果固定元素的寬度而將高度設(shè)置為auto，則可以修改上述代碼來計(jì)算高度，并將寬度設(shè)置為auto。

總之，使用js設(shè)置css寬高比可以使布局更加靈活適應(yīng)不同的需求，同時(shí)優(yōu)化頁(yè)面的響應(yīng)和視覺效果。