ユーザー側で文字サイズを変更できるように制作する場合、単位をremで指定すると便利です。
●Can I use
すでにモダンブラウザで使用できるようになっているので、メモとしてpx毎の対応表をまとめておこうと思います。
●html要素に62.5%（10px）を指定している場合
10px → 1rem
11px → 1.1rem
12px → 1.2rem
13px → 1.3rem
14px → 1.4rem
15px → 1.5rem
・
・
・
●html要素に81.25%（13px）を指定している場合
10px → 0.7692rem
11px → 0.8461rem
12px → 0.9230rem
13px → 1rem
14px → 1.0769rem
15px → 1.1538rem
16px → 1.2308rem
17px → 1.3077rem
18px → 1.3846rem
19px → 1.4615rem
20px → 1.5385rem
21px → 1.6154rem
22px → 1.6923rem
23px → 1.7692rem
24px → 1.8461rem
25px → 1.9231rem
26px → 2rem
27px → 2.0769rem
28px → 2.1538rem
29px → 2.2308rem
30px → 2.3077rem
●html要素に87.5%（14px）を指定している場合
10px → 0.7143rem
11px → 0.7857rem
12px → 0.8571rem
13px → 0.9286rem
14px → 1rem
15px → 1.0714rem
16px → 1.1429rem
17px → 1.2143rem
18px → 1.2857rem
19px → 1.3571rem
20px → 1.4286rem
21px → 1.5rem
22px → 1.5714rem
23px → 1.6429rem
24px → 1.7143rem
25px → 1.7857rem
26px → 1.8571rem
27px → 1.9286rem
28px → 2rem
29px → 2.0714rem
30px → 2.1429rem
●html要素に93.75%（15px）を指定している場合
10px → 0.6667rem
11px → 0.7333rem
12px → 0.8rem
13px → 0.8667rem
14px → 0.9333rem
15px → 1rem
16px → 1.0667rem
17px → 1.1333rem
18px → 1.2rem
19px → 1.2667rem
20px → 1.3333rem
21px → 1.4rem
22px → 1.4667rem
23px → 1.5333rem
24px → 1.6rem
25px → 1.6667rem
26px → 1.7333rem
27px → 1.8rem
28px → 1.8667rem
29px → 1.9333rem
30px → 2rem
●html要素に100%（16px）を指定している場合
10px → 0.625rem
11px → 0.6875rem
12px → 0.75rem
13px → 0.8125rem
14px → 0.875rem
15px → 0.9375rem
16px → 1rem
17px → 1.0625rem
18px → 1.125rem
19px → 1.1875rem
20px → 1.25rem
21px → 1.3125rem
22px → 1.375rem
23px → 1.4375rem
24px → 1.5rem
25px → 1.5625rem
26px → 1.625rem
27px → 1.6875rem
28px → 1.75rem
29px → 1.8125rem
30px → 1.875rem
コメントする