CSS 単位の概要 (rem、px、em、vw、vh、vm など)

この記事では、CSS 単位 (rem、px、em、vw、vh、vm など) の概要と、これらの単位の違いを紹介します。困っている友人は参考にしていただければ幸いです。

px: 画面表示解像度に対する相対的なピクセル (ピクセル) 単位。

em: em 値は固定ではありません。親要素のフォント サイズに統合されます。

注:

1. body を選択し、Font-size=62.5% を宣言します。 2. 元の要素を分割します。 px 値を 10 に置き換え、単位として em に置き換えます。

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

すべてのブラウザのデフォルトのフォント サイズは 16px です。調整されていないすべてのブラウザは、1em=16px、0.75em=12px、および 10px=0.625em に準拠します。 Font-size の変換を簡素化するには、CSS の body セレクターで Font-size=62.5% を宣言する必要があります。これにより、em の値は 16px*62.5%=10px になるため、12px は 1.2em、10px は1em。つまり、元の px 値を 10 で割って em の単位に置き換えます。

rem

: 相対単位 (ルート em は rem) フォント サイズを設定する単位として rem を使用する場合、HTML ルート要素のサイズを基準にすることができます。すべてのフォント サイズはルート要素に比例して変更および調整します。たとえば、

body{font-size:625%;}

(1rem=100px) に記述されます。プロジェクトを一緒に作成する場合は、これを一致させるのが最適です。例:

　　html{font-size:10px}　　　　　　//10px==62.5%

　　@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}

　　@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}

　　@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}

　　@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}

　　@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}

　　@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}

　　@media screen and (min-width:800px){html{font-size:25px}}

vw

: ビューポートの最大幅、1vw= ビューポート幅の 1 パーセント。

#vh: ビューポートの最大高さ、1vh = ビューポートの高さの 1 パーセント

vmin/vm: 幅またはビューポートに対する相対的な高さ。最小のものは 100 単位の vmin (つまり vm) に分割されます。

要約: 以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。関連チュートリアルの詳細については、 CSS ビデオ チュートリアル をご覧ください。

関連する推奨事項:

php 公共福祉トレーニング ビデオ チュートリアル

CSS オンライン マニュアル

div/css グラフィック チュートリアル

以上がCSS 単位の概要 (rem、px、em、vw、vh、vm など)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。