【问题标题】：How can I convert px to vw in JavaScript?如何在 JavaScript 中将 px 转换为 vw？
【发布时间】：2015-02-03 09:09:25
【问题描述】：

我想在 JavaScript 中将 px 转换为 vw，我该怎么做？

我一直在寻找它，但我没有找到任何东西。

所以，

1px → ?大众

谢谢。

【问题讨论】：

Just get the width of your screen in JS 他们说。 gl;hf
@errand，我有一个用例。我将文本字段放置在可以纵向或横向打印完全宽且与屏幕上看到的内容完全匹配的图像上。在可拖动将视口百分比中的字段位置转换为像素之前效果很好。

标签： javascript jquery html css

【解决方案1】：

1px = (100vw / [document.documentElement.clientWidth] px)

例如— 如果您的视口为500px 宽（根据定义等于100vw），那么

1px = (100vw / 500px) = 0.2vw

我在计算中使用.clientWidth 到exclude any scrollbar

【讨论】：

请注意，.clientWidth 是一个属性，而不是一个方法。
好的，谢谢你的来信。 :) （需要第二天早上的咖啡）
为什么要排除滚动条？我观察到 100vw 包括滚动条（如果出现）。所以window.innerWidth一直在给我精确的px和vw之间的转换。但是 document.documentElement.clientWidth 没有。在 Windows Chrome 和 Firefox、Mac Chrome 和 Safari 上试过。

【解决方案2】：

公式是这样的

大众中的像素：

100 * 像素/窗口宽度

vh 中的像素：

100 * 像素/窗口高度

像素单位：

窗口高度 * vh / 100

像素单位：

窗口宽度 * vw / 100

一些灵感代码：（虽然我是一个 JS 菜鸟）

function viewport_convert(px = 0, vw = 0, vh = 0){
    if(px != 0){
        if(vw){
            return (100 * px / window.innerWidth);
        } else {
            return (100 * px / window.innerHeight);
        }
    } else if(vw != 0 && vh != 0){
        var w_h_arr = [];
        w_h_arr["width"] = Math.ceil((window.innerWidth * vw / 100));
        w_h_arr["height"] = Math.ceil((window.innerHeight * vh / 100));
        return w_h_arr;
    } else if(vw != 0){
        return Math.ceil((window.innerWidth * vw / 100));
    } else if(vh != 0){
        return Math.ceil((window.innerHeight * vh / 100));
    }
}

【讨论】：

【解决方案3】：

由于 1vw / 1vh 代表视口宽度 / 高度的 1/100，您可以使用以下方法实现此目的：

var newWidth = yourElement.outerwidth / document.documentElement.clientWidth *100;
yourElement.style.width = newWidth +'vw';

我曾想过使用 Math.round() 来获得干净的数字，但如果排除小数，你肯定会得到错误的尺寸。

你不能直接在 CSS 中改变这个值吗（例如用另一个样式表）？通过 Javascript 转换它似乎很脏。

此外，根据 Errand 的评论，如果您只是将 px 转换为 vw/vh，它不会使您当前的 HTML/CSS 神奇地适应屏幕。

【讨论】：