设置宽度<div>调整 window 的大小时</div><div id="text_translate"><p>所以我在 Vuejs 中得到了这个应用程序，它被css grid划分为 3 个 div 基本上：一个sidebar 、一个configpanel和一个preview 。 我想根据当前屏幕大小和屏幕大小调整时以px为单位设置preview div 的宽度</p><p>为了澄清起见，我制作了一个网站的 gif 图像，它几乎完全符合我的要求： <a href="https://gyazo.com/d667756474e7f4fa18e2d5d64a0dee5a" rel="nofollow noreferrer">https://gyazo.com/d667756474e7f4fa18e2d5d64a0dee5a</a></p><p> 正如您在 gif 中看到的，每次调整屏幕大小时，特定的&lt;div&gt;都会由于某种原因（不知道为什么或如何）被分配一个新的 class 并且 div 的width会自动更新为新的px值。</p><p> 起初我以为我可以在created()钩子中做这样的事情：</p><pre> window.addEventListener("resize", () =&gt; { let preview = window.document.querySelector(".preview"); preview.style.width = `${preview.offsetWidth}px`; });</pre><p> 但这不起作用。</p><p> 我在<a href="https://codesandbox.io/s/hopeful-feather-ywh6z?file=/src/components/Preview.vue:125-430" rel="nofollow noreferrer">这里</a>的codesandbox中设置了一个非常简单的示例项目。</p><p> 理想情况下，我想知道如何像网站在 gif 中那样动态设置像素width 。</p><p> 此外，出于好奇，我想知道每次调整屏幕大小时该特定网站为何以及如何生成新的 class （我已经看过几次了，我想知道它是什么）。</p></div>

Question

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

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

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

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

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

但这不起作用。

我在这里的codesandbox中设置了一个非常简单的示例项目。

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

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

Answer 1

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

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

上面的代码会将定义的 styles 应用到设备屏幕宽度为 750 像素或更少时选择的元素。