新しい珍しい CSS ユニットについて知りました。vhビューポートの高さとvw幅の割合をそれぞれ測定します。
Stack Overflow からこの質問を見ましたが、ユニットがさらに似たものになりました。
答えは具体的に言う
vw と vh は、それぞれウィンドウの幅と高さのパーセンテージです。100vw は幅の 100%、80vw は 80% などです。
%これは、より一般的なユニットとまったく同じように見えます。
開発者ツールで、値を vw/vh から % に、またはその逆に変更しようとしましたが、同じ結果が得られました。
両者に違いはありますか？そうでない場合、なぜこれらの新しいユニットが に導入されたのCSS3ですか?
@IanC さん、回答とコード例をありがとうございます。とても助かりました。明確化：「サイドバー」と書いたとき、「スクロールバー」を意味していたと思います。
スクロールバーをカウントするビューポート単位に関するいくつかの関連する議論を次に示します。
vw、vh、vmin、vmax 単位 (「ビューポートのパーセンテージの長さ」)のW3C 仕様には、「スクロールバーは存在しないと想定される」と記載されています。
@Nolonar のコメントのDifference between Width:100% and width:100vw?のように、Firefox は 100vw からスクロールバーの幅を差し引いているようです。「Can I Use」を引用して観察します。
Can I Useは、おそらく仕様 (?) と緊張関係にあり、現在、Firefox 以外のすべてのブラウザーは、100vw を垂直スクロール バーを含むページ全体の幅と「誤って」見なしていると述べています。
必ずしも上げられていない違いがあります。100vw にはスクロール バーの幅が含まれますが、100% には含まれません。小さな違いですが、設計を行う上で重要です。