単位の重要性については、最近作品を作り始めて、重要性に気づきました。
これまでは、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で簡単に指定できます。
なぜ、vw,vhを進めるのか、これには、理由があります。最近は、スマホでWEBページを見るユーザーが多くなりました。
つまり、WEBページを作る側もそれに合わせる必要が出てきました。
いわゆる…レスポンシブデザインですね!!
モバイルファーストと言うこともありますしね!!
さらに、これを後押ししているのが、googleがデザインパターンとして、レスポンシブデザインを進めているところもあります。
コメント