CSS で一般的に使用されるフォント単位: px、em、rem と %_html/css_WEB-ITnose の違い

CSS に初めて触れたときは、px の方がよく使われ、理解しやすかったのですが、長期間使用していると、特にレスポンシブ開発を行う場合には、いくつかの欠点が見つかるようになります。

それでは、非常に多くの単位があるので、いつどの単位を使用するのが適切なのでしょうか?今日はそれについて話し合いましょう。

まずこれらの単位の意味を簡単に説明します:

1、px

px 単位の名前はピクセルであり、ピクセルは画面メディア (つまり、コンピューター画面上で読み取られる) に使用される固定サイズの単位です。 ）。 1 ピクセルは、コンピュータ画面上の 1 点 (画面解像度の最小単位) に相当します。多くの Web デザイナーは、Web ドキュメントでピクセル単位を使用して、ブラウザーでレンダリングされる Web サイトのピクセル完璧なレンダリングを作成します。

ピクセル ユニットの問題の 1 つは、視覚障害のある読者がモバイル デバイスに対応できる拡張機能がないことです。

2, em

em 単位名は相対的な長さの単位です。現在のオブジェクトのテキストのフォント サイズに関連して、インライン テキストの現在のフォント サイズが手動で設定されていない場合、ブラウザのデフォルトのフォント サイズに相対し、より多くの国で使用されます。以下の特性

1. em 値は固定されていません

2. em は親要素のフォント サイズを継承します。

CSS を記述するときに単位として em を使用したい場合は、次の点に注意する必要があります:

1. body セレクターで Font-size=62.5% を宣言します

2. 元の px 値を除算します。 10 ずつ増やして、単位を em に変更します。

3. 拡大されたフォントの em 値を再計算します。フォント サイズの繰り返しの宣言は避けてください。

どのブラウザでもデフォルトのフォントの高さは 16 ピクセルであることがわかっています。変更されていないすべてのブラウザは、1em=16px に準拠します。すると、12px=0.75em、10px=0.625emとなります。 font-size の変換を簡略化するには、CSS の body セレクターで Font-size=62.5% を宣言する必要があります。これにより、em 値は 16px*62.5%=10px となり、12px=1.2em、10px=1em となります。 , また、つまり、元の px 値を 10 で割って、単位を em に変更するだけです。

em は親要素のフォント サイズを継承しますが、親要素のフォント サイズが変更されると、これはあまり便利ではありません

3. rem は CSS3 です。新しい相対的な長さの単位は、HTML 要素であるルート ディレクトリに対してのみ相対的です

したがって、フォント サイズを HTML タグの標準として設定している限り、ドキュメント内のフォント サイズはそれに基づきますこれ

html{font-size:62.5% ; /* 10÷16=62.5% */}

body{font-size:12px;font-size:1.2rem ; /* 12÷10=1.2 */}

p{font-size:14px;font -size:1.4rem;}

互換性: IE9+、Firefox、Chrome、Safari、Opera のメインストリーム バージョンでサポートされており、rem をサポートしていないブラウザーと互換性があります。対応する px 値を rem の前に書き込む必要があります。サポートされているブラウザは正常にダウングレードできません。

4,

%

パーセント単位は、いくつかの基本的な違いを除いて、「em」単位に似ています。まず、現在のフォント サイズは 100% です (例: 12 pt = 100%)。パーセンテージ単位を使用すると、テキストは完全にスケーラブルなままで、モバイル デバイスでもアクセスできます。

一般的に言えば、 1 em = 16 px = 100%

個人的な要約: 一般的な PC の Web ページ制作プロセスでは、px と em がより多く使用され、モバイル側では一般に rem が使用されます。

下手なまとめですみません！