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

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

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

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以下では一部バグあり(恐らく擬似要素のみ)とのことなので、あまりに気軽に使うと泥沼にハマる可能性があります。ご注意ください。

リファレンス:https://qiita.com/butchi_y/items/453654828d9d6c9f94b0

以上です。

もりけん塾
もりけん先生ブログ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です