BinaryDevelop
  1. ホーム
  2. Web制作
  3. CSS

[CSSチュートリアル】CSSでemを開く正しい方法 詳細へ

2022-01-11 15:25:06

なぜ "通常 1em=16px" と言っているのですか？

ユーザーのブラウザで表示されるデフォルトのテキストサイズは "16px" です。つまり、ウェブページ内の "body" およびその子要素のテキストサイズは、ユーザーのブラウザではデフォルトで "16px" として表示されます。
私たちは皆、次のことを知っています。 em (そして rem )は相対的な単位です！ "Relative"の意味です。

  • 相対計算は参照を持たなければならないので、ここでは相対的に親要素の font-size . たとえば、div でフォントサイズを "16px" に設定すると、その div の子孫のチュートリアルは、その子孫でフォントサイズがリセットされない限り、そのフォントサイズを引き継ぎます。ユーザーがブラウザの UI コントロールでテキスト サイズを変更した場合、ページ全体が拡大 (または縮小) されるため、ブラウザのフォントを変更した後にページ全体がクラッシュすることがありません!
<ブロッククオート

emだけが親要素、remは"root"要素（html）に対して相対的です。

emの本当の姿は？

em：相対的な単位です。基本値は現在の要素のフォントサイズであり、実際の値は（継承された）親要素に依存する。
データ確認＋テストの結果、"unnoticed"の公式があります。
ターゲットem値=ターゲット画素値/親画素値

(↑: emと親要素との関係 font-size が関連付けられています。 

<body>
	I'm <p>yunxiaomeng</p>.
</body>


body{
	font-size: 16px;
}
p{
	font-size: 1.2em;
}


画像に赤い枠があるのがわかりますか？実際にレンダリングされるpタグのサイズ（目標ピクセル値）は、16(px) x 1.2 = 19.2(px) です。

ここでもうひとつ特別な注意点があります。同じ要素の別のセレクタ/属性が、以前の値を別の font-size 値で上書きした場合、このドメインの下で em の基本値を変更することになります!
例えば、上のpに別の属性を追加してみましょう。 

p{
	font-size: 1.2em;
	padding: 1.2em;
}

すると、paddingの実際のレンダリング値（目標ピクセル値）＝19.2(px) x 1.2 = 23.04(px) （つまり、16 x 1.2 x 1.2) となります。


そのため、子要素のレイヤーごとにemを設定しても、実サイズが思い通りにならないようなのです
(なぜフォントの値と同じマージンが入っているのかについては、張新旭の CSSの世界 )

remもそうなんですか？

また、remは相対単位で、ルートroot要素に対して相対的に変化する。
計算方法はemとほぼ同じです。しかし、ここで "一般的な誤解" があります: 通常は、ルート要素の font-size の値は、レスポンシブな適応を行うために、ルート要素の 

let htmlWidth=document.documentElement.clientWidth || document.body.clientWidth;
let htmlDom=document.getElementsByTagName('html')[0];
	
window.onresize=function () {
    htmlDom.style.fontSize=htmlWidth/20+'px';
};

しかし、多くの人が rem の値は "ページサイズ固有のものであると誤解しています" 。 これは実は間違いなのです

<ブロッククオート

そして今のところ、cssでレスポンシブにすることは完全に可能です。
html { font-size: calc(112.5% + 4 * (100vw - 600px) / 400); } メディアクエリのマッチング @media

CSSでemを開く正しい方法について、この記事を紹介し、より関連するCSS open emの内容は、スクリプトホームの過去の記事を検索するか、次の関連記事を引き続き閲覧してください、私はあなたが将来よりスクリプトホームをサポートすることを願っています！。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します