CSS フォント単位とフォントの応答性の実装の違い

以下は、CSS フォントユニットとレスポンシブフォントの実装の違いについて詳しく説明します。内容がとても良かったので、参考にさせていただきたいと思います。

問題のシナリオ:

レスポンシブレイアウトを実装するプロセスで、異なるウィンドウサイズでのフォントサイズと、異なるモバイルデバイスでの読みやすさを設定する方法は?

知っておくべきことは次のとおりです:

1. px、em、ptの変換関係
1em = 16px
1px = 1/16 em = 0.0625em

////以下はあまり使われません//////
1em = 12pt
1px = 3/ 4 pt = 0.75pt
1pt = 1/12 em 0.0833em
1pt = 4/3 px = 1.3333px

2 ブラウザのデフォルトのフォントは 16 ピクセルです。すべての未調整のブラウザのデフォルト サイズは 1em=16px

3 です。Chrome では最小フォントが 10px に設定されていても、最終的には 12px として表示されます。これは、ie または mozllia のフォント サイズが chrome

4 のフォント サイズと異なる場合がある理由を説明しています。px、em、rem vw、vh、vmin の違いは何ですか?

px:

相対単位。画面の解像度に応じて。解像度が高くなるとフォントサイズが小さくなるのはこのためです。では、pxのメリットとデメリットは何でしょうか？

利点: 比較的安定していて正確です。

短所: ページを拡大縮小すると、テキストの読みやすさに影響します。この問題は、フォント単位として em を使用することで解決できます。

em:

相対単位。基本値に基づくフォント サイズのスケーリングは相対値であり、特定の値ではありません。基本値は、親要素によって設定されたフォント サイズによって異なります。親要素で font-size が設定されていない場合は、ルートノードまで上方向に検索します。

利点: pxの欠点を補います

欠点: 親ノードに依存しすぎるため、フォントサイズの宣言が繰り返される傾向があります。

rem:

相対単位。ルート ノード html に相対的なフォント サイズ。

短所: 親要素のフォント サイズへの依存を回避します

利点: 参照系は 1 つだけあり、ルート ノードのフォント サイズ

<SPAN style="FONT-SIZE: 16px">html{font-size:100%}    
//响应式的字体大小相对于根节点变化    
@media (min-width: 640px) { body {font-size:1rem;} }    
@media (min-width:960px) { body {font-size:1.2rem;} }    
@media (min-width:1100px) { body {font-size:1.5rem;} }    
</SPAN>

5 だけです。なぜルート ノードのフォント サイズを 62.5% に設定する必要があるのですか?

上記のように、ブラウザのデフォルトのフォント サイズは 16 ピクセルです。異なるページ サイズでフォント サイズを 12、14、18 ピクセルに設定したい場合はどうすればよいでしょうか。

フォントの相対的なサイズを計算するには、12/16 rem、14/16rem、18/16rem を使用する必要がありますか?

より簡単な方法は、ルート ノードでフォント サイズを 10px に設定することです。メディアは 1.2rem、1.4rem、1.8rem として直接書き込むことができます。 ルートノードが 10px に設定されている場合、ブラウザのデフォルトのフォントサイズに対する相対的なフォントサイズは font-size: 10/16 %、つまり font-size: 62.5% になります

<SPAN style="FONT-SIZE: 16px">html{font-size:10px}    

//响应式的字体大小相对于根节点变化    
@media (min-width: 640px) { body {font-size:1m=1.2 rem;font-size:12px;  /某些浏览器不支持rem/} }    
@media (min-width:960px)  { body {font-size:1.4 rem; font-size:14px; /*某些浏览器不支持rem，需要再次使用px声明font-size*/} }    
@media (min-width:1100px) { body {font-size:1.8 rem; font-size:18px; /*同上*/} }    
</SPAN>

<SPAN style="FONT-SIZE: 16px">html{font-size:16px}    

//响应式的字体大小相对于根节点变化    
@media (min-width: 640px) { body {font-size:12/16 rem;font-size:12px;  /某些浏览器不支持rem，需要再次使用px 声明font-size/} }    
@media (min-width:960px)  { body {font-size:14/16 rem; font-size:14px; /*某些浏览器不支持rem，需要再次使用px声明font-size*/} }    
@media (min-width:1100px) { body {font-size:18/16 rem; font-size:18px; /*同上*/} }    
</SPAN>

上記が内容全体ですこの記事が皆さんの学習に役立つことを願っています。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。

関連する推奨事項:

CSS を使用して英単語の改行を強制するコード

css div によって実装されたマスク レイヤーは、IE6 ～ IE9 および FireFox ブラウザーと互換性があります

以上がCSS フォント単位とフォントの応答性の実装の違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。