ホームページ > ウェブフロントエンド > CSSチュートリアル > CSSにおけるpx em remの違いと使い方を詳しく解説

CSSにおけるpx em remの違いと使い方を詳しく解説

高洛峰
リリース: 2017-03-28 11:04:52
オリジナル
1686 人が閲覧しました

この記事ではCSSにおけるpx em remの違いと使い方を主に紹介します。非常に良い基準値を持っています。以下のエディタで見てみましょう

最近、フォントを学習しているときに、フォントサイズの設定に遭遇しましたfontのサイズの単位はpx、em、remの場合がありますが、これらの単位の違いは何ですか? 、 それの使い方?

ピクセルは、モニターの画面解像度にのみ関係します。画像を拡大すると、それぞれの正方形のグリッドが表示されます。ピクセル。ブラウザのデフォルトのフォント サイズは 16 ピクセルです。

px の特徴は次のとおりです。 フォントの大文字と小文字が固定されており、古いバージョンの IE ではフォントの拡大縮小ができませんが、現在は基本的に以前のバージョンの IE について心配する必要はありません。したがって、十分な精度を持つこの単位が一般的に使用されます。

em は、親要素に対する相対的なフォントのサイズを表す相対単位であり、10 進数の整数にすることができます。たとえば、親要素のフォント サイズが 16 ピクセルの場合、1em は 16 ピクセル、2em は 32 ピクセルになります。

em の特徴は次のとおりです: は固定値ではなく、その値は親フォントのサイズに応じて変化します。 使用シナリオ: 現在の要素の内側の margin が現在のフォント サイズに比例する必要がある場合、em を使用できます。

rem も相対単位です。em との違いは、ルート要素を基準とする点であり、その参照値はブラウザのデフォルトのルート要素のサブイメージのサイズであるため、計算が em よりも簡単で便利になります。は16pxです。

rem の特徴は次のとおりです: ルート要素のフォント サイズに比例し、計算が簡単です。 HTML ルート フォント サイズを制御することで、ページ全体のフォント サイズを変更できます。これは、ページ サイズをモバイルに適応させたものです。

以上がCSSにおけるpx em remの違いと使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート