search
LoginSignup
19

More than 5 years have passed since last update.

posted at

updated at

font-size指定にremを使うmixin

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である 

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
19