调整窗口大小时设置 <div> 的宽度

Question

所以我在 Vuejs 中得到了这个应用程序，它基本上被 css grid 分为 3 个 div：sidebar、configpanel 和 preview。我想在px单元中设置preview div的宽度，根据当前的屏幕大小和屏幕调整大小的时候进行

为了澄清起见，我制作了一个网站的 gif 图像，它几乎完全符合我的要求：https://gyazo.com/d667756474e7f4fa18e2d5d64a0dee5a

正如您在 gif 中看到的，每次调整屏幕大小时，特定的 <div> 会由于某种原因（不知道为什么或如何）被分配一个新类，并且 div 的 width 会自动更新为新的px 值。

起初我以为我可以在 created() 钩子中做这样的事情：

window.addEventListener("resize", () => {
  let preview = window.document.querySelector(".preview");
  preview.style.width = `${preview.offsetWidth}px`;
});

但这不起作用。

我在codesandbox here 中建立了一个非常简单的示例项目。

理想情况下，我想知道如何像网站在 gif 中那样以像素为单位动态设置 width。

此外，出于好奇，我想知道每次调整屏幕大小时该特定网站为何以及如何生成一个新类（我已经看过几次了，我想知道它是什么）。

Answer 1

如果我知道你的意思是正确的，你的解决方案可以是下面的代码（将下面的代码添加到你的 CSS 文件并添加你想要的每个类）：

@media screen and (max-width: 750px) {
  .selector {
    some code here...
  }
}

当设备屏幕的宽度为 750 像素或更小时，上面的代码会将定义的样式应用到选定的元素。