ホームページ > 記事 > ウェブフロントエンド > CSS フォント単位 px、em、rem、% についての深い理解
CSS フォント単位 px、em、rem、% についての深い理解
- yuliaオリジナル
- 2018-09-19 14:23:001453ブラウズ
ページをレイアウトするとき、通常、長さの単位として 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 サイトの他の関連記事を参照してください。