如何根據百分比調整 window 內寬？

Question

我嘗試根據百分比調整 window.innerwidth 但我不知道該怎么做。 我的目標是根據 window.innerwidth 的大小，改變 html 的背景顏色。 window.innerwidth 在比較時不能使用百分比？

我試過這樣。

const resizeColor = function() {
  let width = window.innerWidth;
  if (width >= "90%") {
    document.body.style.backgroundColor = "red";
  } else if (width < "90%" && "60%" <= width) {
    document.body.style.backgroundColor = "blue";
  } else {
    document.body.style.backgroundColor = "white";
  }
};

Answer 1

"90%"不是innerWidth屬性的有效值。 我認為您的意思是 90% 的outerWidth 。 在整頁中嘗試以下內容

 const resizeColor = function() { let width = window.innerWidth; let vw = window.outerWidth; // viewport-width if (width >= 0.9 * vw) { document.body.style.backgroundColor = "red"; } else if (width < 0.9 * vw && 0.6 * vw <= width) { document.body.style.backgroundColor = "blue"; } else { document.body.style.backgroundColor = "white"; } }; window.onresize = resizeColor;