如何在JavaScript中将px转换为vw？

Question

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

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

所以，

  

1px→？ VW

感谢。

Answer 1

  

1px =（100vw / [document.documentElement.clientWidth] px）

e.g。 - 如果您的视口为500px宽（根据定义等于100vw），则

  

1px =（100vw / 500px）= 0.2vw

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

Answer 2

由于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神奇地适合屏幕。

Answer 3

公式像这样

大众中的px：

100 * px / windowWidth

vh中的px：

100 *像素/窗口高度

以像素为单位的vh：

windowHeight * vh / 100

以像素为单位的大众：

windowWidth *大众/ 100

一些启发性的代码：（虽然我是JS noob）

tm = tm[~tm['Tran Date'].str.match(r'^\D', na=False)].replace(np.nan,'')

tm['originalIdx'] = tm.apply(lambda x:x.name if x['Tran Date']!='' else None, axis=1).bfill(limit=1).ffill(limit=2)

tm = pd.merge(tm.drop('Transaction Particulars', axis=1), 
    pd.DataFrame(tm.groupby(['originalIdx'])['Transaction Particulars'].apply(lambda x: " ".join(str(v) for v in x))),
    left_index=True, right_index=True, how='left')