引用元(勉強の為に引用しました。):
http://www.interz.jp/html/em.html
■ 様々な文字の大きさ |
□px 文字サイズのピクセル指定です。dpi・画素数、液晶モニターの粒の大きさでの指定ですね。簡単に指定できデザインもし易いので初心者向から幅広く使用できます。ただ環境(解像度)によって大きさが変わりデザインが崩れるのが欠点です。
□em デザインのプロの人が好んで使っています。emは倍率での指定となります。1.5emの場合は基本値から1.5倍というサイズになります。これは初期設定で10px=1emになるように設定で調整しなければなりません。IEでは拡大縮小できませんがそれ以外のブラウザなら出来ます。 余談ですがemは元々文字間隔を空けるタグです。1emで1文字の間隔が開きます。
□% emはIEでバグがあるので嫌いという方が%指定で使っています。 emはデジカメのズームのように「×1.2倍」と表記しますが 、%は「120%」と表記します。その違いです。しかし下の表を見てのように1%程の誤差があったりブラウザにより差が出ますので絶対的な物でもありません。
□pxとemと%は置き換えられる emは倍率で1.0em=10pxとします。1.2em=1.2倍、10px*1.2em=12px font-size: 62.5% = font-size: 12em = font-size: font-size: 10px よって10px使いたい場合は62.5%でも平気です。
CSS3での設定例
html { font-size: 62.5%; } body { font-size: 14px; font-size: 1.4rem; } /* =14px */ h1 { font-size: 24px; font-size: 2.4rem; } /* =24px */ |
coliss http://coliss.com/ |
■ px em % 対応表 |
□環境によって誤差が出る 液晶の解像度やブラウザの種類などで誤差が出るために絶対的ではありません。いくつかの表を見ましたが若干値が違いますが、下の海外サイトが一番正確なようです。
E-riverstyle Desig Web デザイナー&クリエイターのためのWebデザイン用フリー素材 http://www.e-riverstyle.com/
Pixels | EMs | Percent |
8px | 0.50em | 50% |
9px | 0.56em | 56% |
10px | 0.63em | 62% |
11px | 0.69em | 68% |
12px | 0.75em | 75% |
13px | 0.81em | 81% |
14px | 0.88em | 87% |
15px | 0.94em | 93% |
16px | 1.00em | 100% |
17px | 1.06em | 106% |
18px | 1.13em | 112% |
19px | 1.19em | 118% |
20px | 1.25em | 125% |
21px | 1.31em | 131% |
22px | 1.38em | 137% |
23px | 1.44em | 143% |
24px | 1.50em | 150% |
25px | 1.56em | 156% |
26px | 1.63em | 162% |
27px | 1.69em | 168% |
28px | 1.75em | 175% |
29px | 1.81em | 181% |
30px | 1.88em | 187% |
31px | 1.94em | 193% |
32px | 2.00em | 200% |
PXtoEM.com PX to EMconversion made simple. http://pxtoem.com/
Pixels | EMs | Percent | Points |
6px | 0.37em | 37.5% | 5pt |
7px | 0.438em | 43.8% | 5pt |
8px | 0.5em | 50% | 6pt |
9px | 0.563em | 56.3% | 7pt |
10px | 0.625em | 62.5% | 8pt |
11px | 0.688em | 68.8% | 8pt |
12px | 0.75em | 75% | 9pt |
13px | 0.813em | 81.3% | 10pt |
14px | 0.875em | 87.5% | 11pt |
15px | 0.938em | 93.8% | 11pt |
16px | 1em | 100% | 12pt |
17px | 1.063em | 106.3% | 13pt |
18px | 1.125em | 112.5% | 14pt |
19px | 1.188em | 118.8% | 14pt |
20px | 1.25em | 125% | 15pt |
21px | 1.313em | 131.3% | 16pt |
22px | 1.375em | 137.5% | 17pt |
23px | 1.438em | 143.8% | 17pt |
24px | 1.5em | 150% | 18pt |
|
(2011年11月13日記載) |
0 コメント:
コメントを投稿