単位についてざっくりおさらい
| 単位 | 解説 |
|---|---|
| px（ピクセル） | スクリーンの1pxを1とする単位。固定サイズなのでレスポンシブには向かない。 |
| %（パーセント） | 親要素に対する割合を示す単位。親によってサイズが変わる。 |
| em（エム） | 親要素に対する文字サイズを基準とした単位。文字の字下げなどに使う。 |
| rem（レム） | ルート（html）要素の文字サイズを基準とした単位。 htmlの標準は16pxなので、何もしない場合1rem=16pxになる。 レスポンシブに向いてる。 |
| vw（ブイダブリュー） | ブラウザ幅（ビューポート）を基準にした単位。 vwは横幅、vhは縦幅を表す。100vw・100vhで横幅・縦幅いっぱいを表す。 |
remでレスポンシブ対応？
pxよりもremがレスポンシブに向いている理由として、文字サイズ切り替えに対応しやすいというのがあります。
例えばPCでは16px/スマホではPCと比較し80%のサイズで指定したい場合、remで指定していたら
html {
font-size: 62.5%
}
@media screen and (min-width:768px) {
html{
font-size: 50%;
}
}これだけで対応できます。便利。
でもこれだと全体の指定しかできません。
デザインを忠実に再現する場合、要素に個別に指定しなきゃいけない状況が多いのでこの方法はあんまり使いません。
ぐわーvwでレスポンシブ対応したい
じゃあvwでレスポンシブ対応する？
やってみようPCでちょうどいい大きさにするとスマホではちっせ～～～～～～～！！
逆も然り～～～～～見てのとおりPC表示ではvw指定は向いてないので、固定表示（PC）ではremまたはpx、可変表示（SP）ではvwを使うのがよさげ。（2022.04.14現在🐈）
rem、vwでレスポンシブ対応
やってみるよ！え～～っとPCでは16px=1.6remで～～スマホではモニタ幅75pxの時に14pxにしたいんだけども‥‥vwに変換すると‥‥？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？はい！！
便利なのきた！やってみよう～
.sample{
font-size: 1rem;
}
@media screen and (max-width: 767px){
font-size: 3.733vw;
}SCSSでvwの比率を指定できるfunction、mixin
SCSS使ってるなら、functionとmixin使えば簡単にできるよモニタサイズ375pxを基準としたvw値を計算してくれるfunction、mixinです。
html{
font-size:62.5%; //ルートのフォントサイズを10pxにした上で→
}
body{
font-size:1.6rem; // →サイト全体を1.6rem（=16px）にする
}
// モニタサイズ375pxを起点にしたvwのサイズ指定
@function vw($size, $viewport: 375) {
$rate: 100 / $viewport;
@return $rate * $size * 1vw;
}
// 上記のvwを利用したフォントサイズの指定
@mixin fz($font_size: 10) {
font-size: $font_size * 1px; //vw非対応の場合の保険
font-size: vw($font_size); //フォントをvw指定
}padding:vw(20) vw(15);や@include fz(16);て感じで使います。
詳しくはcodepenを見てねもっと良い方法あったら是非教えてください～～！備忘録でした。