CSS フォント単位 px、em、rem、% についての深い理解
Sep 19, 2018 pm 02:23 PMページをレイアウトするとき、通常、長さの単位として 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>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 サイトの他の関連記事を参照してください。
人気の記事
人気の記事
ホットな記事タグ
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7297
9
1622
14
1342
46
1259
25
1206
29
