CSSのすべてのプロパティのREMの値を設定する

Question

私は自分のサイトでどこでもremを使用したい（すべての可能性のあるプロパティを読む）。ただし、デフォルトのREMを使用して - ピクセルの変換率は非常に直感的ではありません。

10px = 0.625rem 
12px = 0.75rem 
14px = 0.875rem 
16px = 1rem (base) 
18px = 1.125rem 
20px = 1.25rem 
24px = 1.5rem 
30px = 1.875rem 
32px = 2rem 

したがって私は、フォントサイズのため1rem = 10pxのに設定されますhtml { font-size: 62.5%; }を使用しています。 しかし、余白/パディング/ボーダー/ ...をそのコンバージョン率にも設定するにはどうすればよいですか？

ありがとうございます！

Answer 1

我々はコメントでこれをカバーしてきましたが、基本的に答えが62.5％ではなく、10pxのためのベースフォントサイズを設定することですが、今

html { font-size: 10px; } 

は、すべてあなたのレム値は1rem = 10pxのから作業します。あなたの計算は実際よりずっと簡単になりました。

• 1.5rem = 15ピクセル
• 2rem = 20ピクセル

...というように。

margin:1remは実際にはmargin:1opxを意味します。