javascript - 在大窗口尺寸上将所有 "px"值更改为 "vw"

Question

我想更改所有 px 值(例如 padding、margin 和 font-size ) 使用 calc(value/0.2) 函数转换为 vw 值。

怎么可能做到这一点？

window.onresize = Resize;
window.onload = Resize;

function Resize(){
    let mq = window.matchMedia("(max-width: 2000px)");

    if (mq.matches) {
        // all "px" values should change to "vw" values, with a "calc(... / 0.2)" to keep it in normal sizes
    }
    else{
        // take previous pixel values
    }
}

div {
font-size: 30px;
padding-top: 20px;
padding-bottom: 10px;
}

<div>Hello</div>

太棒了。

Answer 1

这是解决这个问题的非常奇怪的方法。通过 javascript 更改 css 是一项非常困难的操作 - 每次更改浏览器后都会重新绘制 html 页面。为什么你不想将 css 与媒体查询一起使用？

@media (min-width: 2000px) {
/*your vw sizes*/
}