![](/img/trans.png)
[英]How to make a div with a fixed width push another div with a relative width when resizing the browser window?
[英]Setting the width of a <div> when resizing the window
所以我在 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 (我已經看過幾次了,我想知道它是什么)。
如果我知道您的意思正確,您的解決方案可以是下面的代碼(將下面的代碼添加到您的 CSS 文件並添加您想要的每個 class ):
@media screen and (max-width: 750px) {
.selector {
some code here...
}
}
上面的代碼會將定義的 styles 應用到設備屏幕寬度為 750 像素或更少時選擇的元素。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.