font-sizeあれこれ

基本はpx使っているためか、remとemの使い方をすぐに忘れてしまいます…

rem html要素のfont-sizeを基準とする。
html {
font-size: 32px;
}
h1 {
font-size: 2rem; /* 64px */
}
div {
font-size: 0.5rem; /* 16px */
}

em 親要素のfont-sizeを基準とする。
html {
font-size: 32px;
}
h1 {
font-size: 2em; /* 64px */
}
.content {
font-size: 16px; /* 16px */
}
.content .child {
font-size: 0.5em; /* 8px */
}

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください