cssの基本単位として”rem”を使うと便利な件について

study

2020.08.26

ホームページを作るときに、の幅の指定に困りませんか？

今回は、それを解決しようと思います。

width,heightの指定として、楽なのは、remです！！

remとは何か…

ルート要素(html要素)で指定した値を元に、フォントサイズ、幅、高さを指定できるものになります。

イメージがわかないと思うのでコードで見てみましょう。

html {
　font-size:15rem;
}

p {
　font-size:1.2rem;
}

strong {
　font-size:1.4rem;
}

お気づきの方もいるかもしれませんが、
htmlのfont-size:15remを元に計算します。
p要素であれば、15px x 1.2rem=18pxのような感じになります。
strong要素だれば、15px x 1.4rem = 21remという感じです。

では、rem指定だと何がいいのか？
答えは、

emや%だと<p>の中に<strong>があったときのように2重掛けが起こってしまうので、そのような煩雑なサイズの継承から逃れられます。

ただし、問題点があります。

それは、

Google Chromeでは「最小フォントサイズ」というものが存在するので、中途半端なサイズまでしか縮小できません。

例えば、
html {
　font-size: 1px;
}
p {
　margin-top:30rem;
}

のようにするとレイアウト崩れを起こします。

なので、
html {
　font-size: 15px;
}
p {
　margin-top:2rem;
}

のように、11〜20pxくらいが良いとされています。

あと、もう一つ注意点として、

remは比較的最近導入されたCSS3の単位で、IE9から対応しています。
ただし、IE10以下では一部バグあり（恐らく擬似要素のみ）とのことなので、あまりに気軽に使うと泥沼にハマる可能性があります。ご注意ください。

以上です。