概要
状態:-
閲覧数:3,476
投稿日:2016-03-06
更新日:2020-03-16
「ルート要素の文字サイズ」を基準にするCSS3の単位
ルート要素とは？
・html要素
フレームワーク導入事例
・Bootstrap4
比較一覧表
・CSS3の新単位remで、文字サイズの指定を分かりやすく
ルート要素とは？
・html要素
フレームワーク導入事例
・Bootstrap4
比較一覧表
| 単位 | 指定 | 特徴 |
|---|---|---|
| px | 絶対指定 | 指定したサイズ |
| em | 相対指定 | 親要素を基準に計算される |
| % | 相対指定 | 親要素を基準に計算される |
| rem | 相対指定 | root要素（html）を基準に計算される |
rem × Bootstrap4
bootstrap-4.0.0-alpha.2
ルート要素(html)フォントサイズ
・16px
▼dist/css/bootstrap.css
html {
font-size: 16px;
-webkit-tap-highlight-color: transparent;
}bootstrap-4.0.0-alpha.2のサイズ表記はバラバラ
当初予想
・html にだけpx指定
・後は全てrem
実際
・バラバラ
・ドキュメントとの整合性も取れていない
具体例
Overview
・Responsive breakpoints
・@media (min-width: 34em) { ... }
Responsive utilities
・Available classes
・Portrait phones (<34em)
bootstrap.css at v4-dev
▼dist/css/bootstrap.css
・@media (min-width: 544px) {
現状
実際のbootstrap.css
・下記単位が混在
・rem
・em
・px
・%
rem使用の問題点 ／ remが最新で最強じゃないの？
rem使用の問題点
数字のみ目立たせたい
下記問題点
・表示場所に応じた大きさ変化が出来ない
・ルートに対する大きさではなく、その場所のフォントサイズより少し大きくしたい
.ymdnum {
font-style: italic;
font-size: 1.1rem;
}
相対値へ変更
.ymdnum {
font-style: italic;
font-size: 1.1em;
}