2024
html {fonto-size: 62.5%;}を利用していこうかと。
14px = 1.4rem
1px = 0.1rem
…sassの計算式も変更
2021
サイズ指定、1rem = 16px
文字サイズ、14px （モバイル）
気持ち悪いのは、1rem = 1文字と考えてしまうからである。
しかし、0.875rem = 1文字 ( 14 / 16 ) と、考えれば良いだけ。
と思う。
html {
font-size: 0.875rem;
font-size: 14px;
}他は、16pxに指定する。
色々考えたけど、これまでと一緒。
2020年まで
1rem = 16pxで全てを計算していた
コンパイル後、
margin-right: 1rem;
margin-right: 16px;のような表示で統一。
コードが見やすかったので長い間利用しているが、数年前から、スマホでの文字サイズが、14px 相当が適していると感じているので、デフォルトで、14pxを使えるようになるとどうなるのか？
メリット、デメリットを最近の動向を踏まえて考えたい。
現状のメリット
とにかく色々と計算しやすい。
後少しスペースが欲しい時に、基準が持てるので分かりやすい。
0.1rem = 2px
0.5rem = 8px
1rem = 16px
1.5rem = 24px
2rem = 32pxデメリットは特になかった。
最近の文字サイズに合っていない気がするだけ。
そこで、
1rem = 14px
62.5% を利用する方法もある。が、そんなことする必要あるのか？って感じなんですよね。
今まで
4px,8,px,12pxといった、2の倍数で対応できたので、16pxを利用していたと思う。
とりあえず、14で適当にしたら、どうなるか？あまり気にぜず計算してみよう。
0.1rem = 2px ... = 2/14
0.5rem = 7px ... = 7/14
1rem = 14px ... = 14/14
1.5rem = 24px
2rem = 32px
320px = 16 * 20rem
色々考えたけど、そもそも、割り切れない…そういえばそうだった。
sass のmixin で管理しているから、割り切れた方が、管理しやすいので、最初の結論に至る。