web-dev-qa-db-ja.com

JavaScriptでpxをvwに変換するにはどうすればよいですか？

JavaScriptでpxをvwに変換したいのですが、どうすればよいですか？

探していましたが、何も見つかりませんでした。

そう、

1px→？vw

ありがとう。

javascriptjquerycsshtml5css3
17
Kappys

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

例えば—ビューポートが500px幅（定義により100vwと等しい）の場合

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

.clientWidthを使用して、計算から スクロールバーを除く を使用しました

36
fcalderan

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が魔法のように画面に収まりません。

2
enguerranws