マルチデバイスに対応したフロントエンド開発時代のフォントユニットの選び方_html/css_WEB-ITnose

モバイル Web やアプリを作成する場合、さまざまな画面に適応させるために、さまざまな画面サイズに合わせて大量の CSS コードを記述する必要がある場合があります。そのため、現時点ではフォントを固定サイズで設定するとします。サイズが大きい場合は、多くのコードが必要になります。このとき、相対サイズを使用する必要があるため、指定されたルート要素の値を変更する必要があります。 CSS3 では、新しいフォント単位 rem も登場しました。ほとんどすべてのアダプティブ Web デザインの書籍や記事では、フォント単位として em を使用することが推奨されており、すべてのサイズ設定の単位として em を使用することさえ推奨されています。では、em と px を変換するとどうなるでしょうか?

1 ÷ 親要素のフォントサイズ × 変換されるピクセル値 = em 値

この分野については多くの記事があり、他の人が非常によくまとめているので、ここで時間を無駄にすることはなく、次のURL

CSSの強力なEM

http://www.w3cplus.com/css/px-to-em

WEBフロントエンド開発におけるpx em remの違い

http://www.qianduanview .com/571. html

レスポンシブ Web デザイン (レスポンシブ Web デザイン)

http://www.ruanyifeng.com/blog/2012/05/sensitive_web_design.html

em と px の変換チャート

一般的に使用される Web フォントの単位

ピクセル (px)

長さはディスプレイの解像度に応じて決定され、この単位は Web アプリケーションでよく使用されます

フォントの高さ (em)

は現在のテキストのサイズを表します。たとえば、{font-size:2em} は、テキスト サイズが元のサイズの 2 倍であることを意味します。設定しない場合、ブラウザのデフォルトのフォント サイズは 2em=32px

です。また相対的です。単位 (rem=ルート em) が明らかに em から変更されているか、rem が em のアップグレード版です。ルート em は、親要素に対する相対ではなく、ルート ディレクトリに対する相対値です。つまり、絶対値ではありますが、ルート ディレクトリ (html) に対する相対値のみであり、他の要素と同様に変更されません。言い換えると、他の要素を考慮せずに HTML のテキスト サイズを設定するだけで済みます

その他の一般的な Web フォント単位

ポイント (pt)

Windows システムに従って定義されます

インチ（in）、センチメートル（cm）、ミリメートル（mm）

表示されている実際のサイズに基づいて長さを決定します。このタイプの単位は、ディスプレイの解像度が変わっても変わりません。

12pt フォント (pc)

つまり、Windows システムによって定義された 12 フォント サイズの単位 (1pc=12pt)。単位の前に入力される数字は、フォント サイズの倍数を表します。たとえば、{font-size: 2pc;} は、テキスト サイズが 24pt であることを示します

フォントの高さ (ex)