Edited at

font-size指定にremを使うmixin

More than 3 years have passed since last update.

remを簡単に扱うためのmixin。IE8以下の環境へはpx指定する。「$base: 16」の意味は後述。1

@mixin font-size($size, $base: 16) {

font-size: $size + px;
font-size: ($size / $base) + rem;
}

// 使用方法

p {
@include font-size(12);
}


remとは

CSS3でサポートされたfont-sizeの単位で、由来は root + em

親要素からの相対指定するemに対して、

ルート (html要素) 基準にした相対指定が可能なので、

コードを読みやすい。サイト全体の文字サイズのコントロールが簡単。

例: Font Size Idea: px at the Root, rem for Components, em for Text Elements | CSS-Tricks





  1. 現在普及しているブラウザはすべてfont-sizeの初期値が16pxである