基準となる値は「100vw ・ 100vh」で、それぞれビューポート 100% と同等の値になります。 例として以下の様な構造の HTML マークアップがあったとします。 <body> <img src="images/thumbnail.gng" width="100px" height="100px" /> </body> img { display:inline-block; margin:auto; width:10vw; } 元の画像のサイズは 100px × 100px ですが、CSS 側で「10vw」と指定しています。 ここでは仮に iPhone 5S でレンダリングするとして、ビューポート幅をピクセルで表すと 320px になりますが、10vw はその 1/10 ということで、「32px」が img の幅となります。 つまり 1vw、1vh はそれぞれ 1% と同じ長さにな
![【CSS3】最新の単位[vw][vh][vmin][vmax]の解説。](https://cdn-ak-scissors.b.st-hatena.com/image/square/619ea591ff08f5018e9705d3d2b2772600509cc6/height=288;version=1;width=512/https%3A%2F%2Fon-ze.com%2Fwordpress%2Fwp-content%2Fthemes%2Fonze-2022%2Finc%2Fthumbnail%2F600x360x80-9ba6cca3e6aff99506726b2a7bd0d9af-thumbnail.png)