html - vw および vh ユニットはどのように機能しますか?

Question

vhとの値を計算する方法を知りたいですvw。私は2vw自分のテキストを使用して完全に機能するウェブサイトを設計しています。しかし、私は推測しただけです。将来使用できるように、これらのユニットがどのように機能するか教えてください。また、クロスブラウザがサポートされているかどうかも知りたいです。

Answer 1

vwおよびvhは、それぞれウィンドウの幅と高さのパーセンテージです。100vw は幅の 100%、80vw は 80% などです。

値をピクセル単位で計算するには、次のようにします。

vwToPx = function(vwValue) {
    return $(window).outerWidth()/100*vwValue;
}

注意すべきことの 1 つは、モバイル Safari は依然としてvh正しくレンダリングされず、最新の Android ブラウザー以外はどちらのユニットも処理できないということです。caniuseを参照してください。

詳細については、csstricks.comのこの記事を参照してください。