カテゴリー:
フォント
閲覧数:615 配信日:2017-05-23 00:01
案A.16px;
絶対値による固定
・✕
案B.100%;
ルート要素フォントサイズを「100%;」とする方式
案C.62.5%;
ルート要素フォントサイズを「62.5%;」とする方式
・全体基準となるhtmlタグのfont-size指定を、62.5%へ設定
目的
・1em を 10px とするため
・「em」や「rem」を「切りの良い数値」で変換することで直感的に扱い易くする
62.5%=10px
100px=16px ✕ 62.5%
1em = 10px比較一覧表
| % | px | em |
|---|---|---|
| 100 | 16 | 1 |
| 62.5 | 10 | 1 |
/* フォントサイズ */
html {
font-size: 62.5%;
}
body {
font-size: 1.4em;
}
h1 {
font-size: 2.6rem;
}
h2 {
font-size: 2.1rem;
}
h3 {
font-size: 1.7rem;
}
h4 {
font-size: 1.4rem;
}
h5 {
font-size: 1.2rem;
}
h6 {
font-size: 1.1rem;
}
案D.calc(100vw / 32);
ルート要素フォントサイズを「calc(100vw / 32);」とする方式
目的
・画面幅320pxのルート要素フォントサイズを10pxとするため
1remをビューポート幅の1/32に関連付ける
・幅が1remの要素は、常にビューポート幅の1/32になる
html {
font-size: calc(100vw / 32);
}その結果
・ルートのfont-sizeは画面幅に応じて変わる
・ルートより下はremを記述することでルート変更が適用される
html {
font-size: calc(100vw / 32);
}
p {
1.2rem;
}試してみたが、モバイル表示時の<h3>が意図せず小さくなる
・理由不明
・✕
・font-size
・font-sizeは%またはpxの何れで指定する方が良い？ 100%＝16pxは何に基づくのでしょうか？