CSS フォント単位 px、em、rem、% についての深い理解-CSSチュートリアル-php.cn

CSS フォント単位 px、em、rem、% についての深い理解

yulia

リリース： 2018-09-19 14:23:00

オリジナル

1488 人が閲覧しました

ページをレイアウトするとき、通常、長さの単位として px を使用することを選択しますが、em、rem、およびその他の長さの単位に慣れていない人も多いでしょう。次に、CSS フォントの単位である px、em、rem、およびパーセントについて説明します。困っている友達は参考にしていただければ幸いです。

CSS フォントの単位にはさまざまな種類がありますが、ここでは %、px、em、および rem のみを紹介します。%

2.px ピクセル (ピクセル)。相対的な長さの単位。ピクセル px は、表示画面の解像度を基準としています。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .div1{
               font-size: 20px;
            }
        </style>
    </head>
    <body>
        <div class="div1">
            字体为20px
       </div>
    </body>
</html>

ログイン後にコピー

2. Em は長さの相対単位です。オブジェクトのテキスト内のフォントサイズを基準とします。現在のインラインテキストのフォントサイズが手動で設定されていない場合、ブラウザのデフォルトのフォントサイズと同じになります。

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            body{
                /*相对于浏览器的字体大小16px定义，此时浏览器的字体大小为10px，便于以后计算*/
                font-size: 62.5%;
            }
            .div1{
                font-size: 2em;
            }
        </style>
    </head>
    <body>
        <div class="div1">
            字体2em相当于20px
        </div>
    </body>
</html>

ログイン後にコピー

em の特性

1. em の値は固定ではありません。

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

3.rem は、CSS3 によって導入された新しい相対単位 (ルート em) です。Rem は依然として相対的なサイズですが、値は HTML に対して相対的なものです。これにより、ルート要素を変更することですべてのフォントのサイズを比例的に調整でき、レイヤーごとにフォントサイズが複合する連鎖反応を回避できます。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
             .div1{
                 /*相对于HTMl字体*/
                 font-size: 2rem;
            }
        </style>
    </head>
    <body>
        <div class="div1">
            字体2rem相当于32px
        </div>
    </body>
</html>

ログイン後にコピー

ありがとうございます!

以上がCSS フォント単位 px、em、rem、% についての深い理解の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。