<p>當我們想要基于視口寬度來設置元素的寬度時，可以使用CSS的vw單位（即viewport width）。相較于百分比單位，vw單位更加靈活，因為它直接將視口的寬度分割成100份，方便我們直接使用。

/* 假設視口寬度為900px */
.box {
width: 50vw; /* 寬度為450px */
}

我們可以看到，當視口寬度為900px時，以上代碼會將寬度設為450px，即視口寬度的一半。但是，有時候我們需要通過JavaScript獲取元素的寬度值。這時候，我們需要知道使用vw單位設置的元素寬度是如何被計算的。

其實，vw單位是計算過后的結果，實際上在文檔流中，這些元素的寬度仍然是以像素（px）為單位的。我們可以借助獲取元素寬度的方法來看一看：

let boxWidth = document.querySelector('.box').offsetWidth;
console.log(boxWidth); // 實際寬度值，單位為px

因此，我們無需擔心vw單位會影響到我們獲取元素寬度的值，只需注意在CSS中正確使用即可。