如何在使用 Vanilla JavaScript 调整浏览器大小时刷新变量？

Question

let size = carousel_images[0].clientWidth;我使用并clientWidth在不同的视口中变化来获取幻灯片图像的大小，这里carousel_images是指向img内部的.carousel，这是它在不同视口中的变化方式：

@media screen and (min-width: 1024px) {

  .carousel {

    max-width: 994px;

    img {

      min-width: 994px;

    }

  }

}

@media screen and (min-width: 1200px) {

  .carousel {

    max-width: 1150px;

    img {

      min-width: 1150px;

    }

  }

}

所以当我调整浏览器的大小时，它看起来像：

但是当我刷新页面时，它看起来又正常了。

Answer 1

您需要添加以下代码：window.addEventListener('resize', ()=>{    size = carousel_images[0].clientWidth    carousel_slide.style.transform = `translateX(${-size}px)`})本质上，您需要resize在使用该变量的任何位置监听窗口事件、更新变量并再次执行代码。

Answer 2

我认为你必须为你的let size. 是全局变量吗？也许，将它放在函数或类中是个好主意。您可以使用 resize 事件，该事件在您的窗口更改大小时触发。以下演示来自： https ://developer.mozilla.org/en-US/docs/Web/API/Window/resize_eventconst heightOutput = document.querySelector('#height');const widthOutput = document.querySelector('#width');function reportWindowSize() {&nbsp; heightOutput.textContent = window.innerHeight;&nbsp; widthOutput.textContent = window.innerWidth;}window.onresize = reportWindowSize;<p>Resize the browser window to fire the <code>resize</code> event.</p><p>Window height: <span id="height"></span></p><p>Window width: <span id="width"></span></p>