単位の重要性について(px,%,em,rem,vw,vh…)

単位の重要性については、最近作品を作り始めて、重要性に気づきました。

これまでは、px,%を多用していましたが、vw,vhを使った方が良い場合が多いですね。

px：10pxだと、画面が小さくなろうと指定した10pxのままです。

％：親要素の値によって変わります。
　　例：body{font-size: 20px;} p{font-size: 80%;}
　　この時のp要素のfont-sizeは、16pxになります。

em:これも％と同様に、親要素の値によって変わります。

rem(root em)：ルート要素のフォントサイズによって値が変わります。
　　　　　　ルートとは、最上層に位置する(htmlタグ)のことです。
　　　　　　つまり、<html></html>のことです。
　　　　　　 remのいいところは、親要素によって値を一つずつ変えなくていい点です！！

vw(viewport width)：これは、viewport(表示領域)の幅に合わせて自動で指定してくれます。
　　　　　　　　　 vwのいいところは、レスポンシブなどのPC、スマホ、タブレットなどで画面いっぱいに表示したい時など、に100vwとすると、どのデバイスでも画面いっぱいに表示することができます。
vh(viewport height)：上記のvwの高さバージョンです。使い道としては、画像を中央に正確に配置したい時に、要素の高さが分かっていれば、marginプロパティでtopとbottomの値を[(100 – height)/2]vhに設定するだけで表示できます。
さらに、1カラムで表示したい時にも、100vhで簡単に指定できます。