実際のフロントエンド開発への行き方：CSSのフォント単位：PX、EM、REMおよび％

プロットと印刷については、「単位」は重要ですが、ページレイアウト、ユニットは、CSS3の人気以来、（PX、EM、レム...など）の一部を使用して簡単にユニットのためのより多くのサポートと同じ重要性です、この記事では、これらの共通のCSS単位を整理するだけでなく、より便利に使用することができ、将来的に自分自身を助けるだろう。

「ウェブ」と単位の「印刷」
ユニットは、セグメントを行う必要がある場合は、最も簡単には通常、CSSのための唯一のスタイルのページに適用される「ページ」と「印刷」2つのカテゴリに分けることができ、結局、実際に行う必要があります印刷、または組版ソフトウェアで設計される傾向にあります。

Webページ（ユニット）

PX：各画面を表す絶対単位は、「点」（ピクセル）。
EM：相対単位は、各サブ要素は、貫通親要素PXの値によって乗算される「乗数」。
REM：相対単位は、各要素を介してルート要素PXの値によって乗算される「乗数」。
％：相対単位は、各サブ要素は、貫通親要素PXの値を乗じて「パーセンテージ」。

一つは、モチベーションの欠如混乱があるでしょう学習します。ここで私は、フロントエンドの学習交換基を推薦するものです：731 771 211、研究のフロントエンドである、あなたがWebページを作成したい場合は、クールなプログラミングを勉強したいです。ご自身は、HTML5実際の学習教材が仕上げされているプロジェクトの最後に移動するには、[特殊効果、ゲーム、プラグインパッケージのデザインパターンを冷却する]最も基本的なHTML + CSS + JSから、最も包括的な研究材料フロントエンド2019を与えたコンパイルすべてのフロントエンドジュニアパートナーは、自分のスキルをアップグレードするジョブ、または大学生だけでなく、作業をWebフロントエンドを学ぶ、または変更したいと考えていました、学ぶことを学ぶためにジュニアパートナーの参加を歓迎します。

クリック：参加

Webページ（属性名）

培地：16pxに（H4プリセット値）に
XX-小さな：培地の0.6倍（H6プリセット値）
X-小さな：0.75倍中
小：0.8倍媒体（H5プリセット値は、W3C 100として定義され、見つかった約0.8）
大型は：1.1倍媒体（W3C 1.2、として定義さH3プリセット値は、約1.1で測定）
X-大：中程度の1.5倍（H2プリセット値）
XX-大：中程度の2倍（H1プリセット値）
小さい：親の約80％
大きな：親の約120％

印刷

PT：各 "点" のプリンタが1 PTとして定義されている= 1/72で、72 DPIシステムであれば1つのピクセル= 1 PTが、96DPIシステム上の1つのピクセル= 0.75 PT（72/96 IF = 0.75）。
で：= 96ピクセルでシステム1に96 dpiでインチ。
センチメートル：cmで、96 DPIシステム1センチ= 37.795275593333 PXに。
MM：96 DPIシステム1センチメートル= 3.7795275593333 PXにミリ。

例の
フォントサイズを設定していない場合は、次の例は公正では、四つの異なるユニットが表示されます、すべての4つの例は、デフォルトの形式を取る任意の異なるフォントサイズの純粋な外観を変更する、子要素のでDIV、意志自動的に親要素のフォントサイズを継承し、使用することは、すべての要素にデフォルトのフォントサイズを変更することができ、次の2つのCSSは、その後、個別に調整することが可能に16px、フォントサイズを事前に初期化する必要があります。

html{
    font-size:16px;
}

html * {
    font-size: 1rem;
}

PX 1
PXは、例に示すように、フォントがどのくらいのピクセルくらい指定し、組版用語の正確な位置にいくつかの重点のために有用な、ピクセルの数が設定されている限り、正確のプレゼンテーションが存在するであろう、絶対単位です。

<div style="font-size:16px;">16px
    <div style="font-size:20px;">20px
        <div style="font-size:24px;">24px
            <div style="font-size:16px;">16px
                <div style="font-size:32px;">32px</div>
            </div>
        </div>
    </div>
</div>