1. masarufuruya

    Posted

    masarufuruya
Changes in title
+CSS3のremとemの違いについて
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,69 @@
+
+## CSSのフォントサイズ指定方法は次の2つ
+* 絶対値: 10pxなら絶対に10px
+* 相対値: 親要素のサイズによって可変
+
+## px
+* サイズを絶対値で指定
+
+```
+html {
+ font-size: 32px;
+}
+
+h1 {
+ font-size: 64px; // -> 64px;
+}
+
+span {
+ font-size: 20px; // -> 20px;
+}
+```
+
+
+## em
+* 親要素の`font-size`を基準に大きさを計算する
+
+```
+html {
+ font-size: 32px;
+}
+
+h1 {
+ font-size: 2em; // -> 64px;
+}
+
+span {
+ font-size: 0.5em; // -> 32px;
+}
+```
+
+* 要素が入れ込んでくると、どの親要素を基準にしているかが分かりにくくなる
+* そのためCSS3で使えるようになったのが、rem
+
+## rem (root em)
+* 文書のルート要素、つまり`html`要素の`font-size`を基準にする
+
+```
+html {
+ font-size: 32px;
+}
+
+h1 {
+ font-size: 2rem; // -> 64px;
+}
+
+span {
+ font-size: 0.5rem; // -> 16px;
+}
+```
+
+## ブラウザサポートを確認
+* Can I Useで確認するとIE8以下は未対応。IE9と10は一部対応
+* それ以外のブラウザは対応している
+
+![Kobito.qvcwUf.png](https://qiita-image-store.s3.amazonaws.com/0/33823/dc811104-f8c0-b281-15b0-b96bf5d9ff9d.png "Kobito.qvcwUf.png")
+
+
+
+