始めに
cssのサイズ指定をする際、pxや%など色々な単位がありますが、どれが一番適切なのかよく理解出来ていなかったので自分なりにまとめていきたいと思います。
pxについて
pxは絶対値なので値を指定する事でどの様な画面でもそのサイズに固定して表示させる事が出来ます。使用はしやすいですが、レスポンシブ対応する際は、融通が効かないので不具合が出る可能性が高くなります。
.test {
font-size: 16px;
}
%について
%は相対値なので親要素の値によって値が変化します。デフォルトは16pxなのでその値を基準に何%かを表示させる事が出来ます。
レスポンシブサイトを作成する際は後ほど説明しますremを親要素の値として使用し子要素に%を使用する事で画面の拡大、縮小する際に自動的に文字のサイズを変更する事が可能になります。
.html {
font-size: 16px;
}
.test {
font-size: 200%;
}
この場合のfont-sizeの値は32pxになります。
emについて
emも同じ相対値かつ使用方法は%とあまり変わりません。%で表現しますと1em＝100%となります。
.html {
font-size: 16px;
}
.test {
font-size: 2em;
}
この場合のfont-sizeの値は32pxになります。
remについて
remも相対値でレスポンシブ画面にも対応できる単位となります。[root em]の略でremです。%やemは親要素の値を参照して表示されますが、remの場合だとルート、つまりhtmlのサイズを基準に表示する事が出来ます。
なので%やemの入れ子構造の問題に悩まされる事がない為、修正もしやすくなります。
.html {
font-size: 16px;
}
.test {
font-size: 2rem;
}
この場合のfont-sizeの値は32pxになります。
vw/vhについて
vmはviewport widthの略でビューポートの幅の事で、vhはviewport heightの略でビューポートの高さの事です。ビューポートとはユーザーが見ている画面に対しての表示の事です。
vwは、画面の横幅を100として、その割合でフォントサイズを指定します。つまり、1vwの大きさとは、画面サイズの1/100という意味になります。これは高さを意味するvhも同じです。
この他にもvmaxとvminがあります。
画像をフルスクリーンで表示させる場合の使用方法は
.fullscreen {
width: 100%;
height: 100vh;
padding: 40vh;
}
となります。
まとめ
cssって本当奥が深いですね。レスポンシブ対応させる場合はこの辺りを理解する必要がありそうです。正直言葉足らずな所もありますので、以下の記事も参考して頂けたらと思います。
https://creive.me/archives/16915/#px
https://qiita.com/39_isao/items/e8242901ba1aadb75676