CSS フォントユニットと fonts_html/css_WEB-ITnose のレスポンシブ実装の違い

問題シナリオ:

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

知っておくべきこと:

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. 任意のブラウザデフォルトのフォントはすべて 16px です。すべての未調整のブラウザのデフォルト サイズは 1em=16px

3 です。Chrome では最小フォントが 12px に設定されます。10px に設定されている場合でも、最終的には 12px として表示されます。これは、IE や Mozllia のフォント サイズが Chrome のフォント サイズと異なる場合がある理由を説明しています

4.px、em、rem vw、vh、vmin の違いは何ですか?

px:

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

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

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

em:

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

利点: px

の欠点を補います。

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

rem:

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

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

長所: 参照系はルート ノードのフォント サイズ 1 つだけです

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;} }

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

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

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; /*同上*/} }

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

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

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; /*同上*/} }

Referenceコンテンツ:

Response スタイルのデザイン: レスポンシブ フォントを使用する http://www.w3cplus.com/owned/ Understanding-sensitive-web-design-how-to-manage-fonts.html

レスポンシブ デカメロン: 日1 つ http://ued.taabao.org/blog/2013/05/rem-font-size/

読みやすいフォント サイズを使用する https://varvy.com/mobile/legible-font-size.html

レスポンシブ フォント サイズ http://stackoverflow.com/questions/15649244/owned-font-size

ビューポート サイズのタイポグラフィ https://css-tricks.com/viewport-size-typography/

CSS を使用したレスポンシブ フォント サイズ http :/ /codeitdown.com/owned-font-size-css/

REM を使用したレスポンシブ タイポグラフィ: 3 つのステップでスケーラブルなタイポグラフィ基盤を構築する方法 http://blog.bugsnag.com/owned-typography-with-rems

css font-size: em、px、rem 変換