CSS_html/css_WEB-ITnoseのフォント応答性設定について

ページのレスポンシブデザインでは、画面解像度に応じて異なるサイズのフォントを表示する必要があることがよくあります。通常のアプローチは、メディア クエリを通じて、解像度ごとに異なるフォント スタイルを指定することです。例:

body{       font-size: 22px; }h1{       font-size:44px;}@media (min-width: 768){       body       {           font-size: 17px;        }       h1       {           font-size:24px;       }}

さらに、次の方法でフォントを画面解像度に適応させることもできます。

<strong>1vw = viewport宽度的1%1vh = viewport高度的1%1vmin = 1vw或者1vh中较小的值1vmax = 1vw或者1vh中较大的值</strong>

例えば、スタイルシートで次のスタイルを定義できます:

h1 {  font-size: 5.9vw;}h2 {  font-size: 3.0vh;}p {  font-size: 2vmin;}

ビューポートとは

ビューポートはHTML5で追加された新しいメタタグで、主な機能はモバイル用です。クライアント ブラウザは表示の最適化を実行します。ビューポートの属性値を設定することにより、モバイル ブラウザで現在のページがデフォルトでどのように表示されるかを制御できます。以下は、モバイル Web ページに最適化されたページでよく使用されるビューポート メタ タグの設定項目です:

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″></meta>

ページをレスポンシブ デザインに対応させたい場合は、ページにビューポート メタ タグを追加する必要があります。詳細については、「ブートストラップのレスポンシブ デザイン」を参照してください。

完全なビューポート構文は次のとおりです:

<!-- html document --><meta name="viewport"        content="            height = [pixel_value | device-height] ,            width = [pixel_value | device-width ] ,            initial-scale = float_value ,            minimum-scale = float_value ,            maximum-scale = float_value ,            user-scalable = [yes | no] ,            target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]        "/>

height: ビューポートの高さを制御します。デバイスの高さを表す固定値または device-height を指定できます (単位はピクセルです)。 100% ズーム時の値)。

width: は高さに対応し、ビューポートの幅を示します。 device-width はデバイスの高さを表します。

initial-scale: ページの初期スケーリング率。値は、現在のページ サイズの倍数を示す 10 進数にすることができます。たとえば、2.0 は、ページが初期状態で 2 倍に拡大されることを意味します。

minimum-scale: 許容される最小スケーリング率。値は 10 進数にすることができ、ページを表示できる最小倍数を示します。たとえば、2.0 は、ページを 2 倍未満に縮小して表示できないことを意味します。

maxmium-scale: は、最小スケールに対応し、最大許容スケーリング比を示します。

ユーザースケーラブル: ユーザーがページをズームできるかどうか。デフォルト値は「yes」です。「no」に設定すると、最小スケールと最大スケールは無効になります。

target-densitydpi: ページが表示される dpi を指定します。画面のピクセル密度は画面の解像度によって決まり、通常は 1 インチあたりのドット数 (dpi) として定義されます。 Android は、低ピクセル密度 (low-dpi)、中ピクセル密度 (medium-dpi)、および高ピクセル密度 (高 dpi) の 3 つの dpi 設定をサポートしています。ピクセル密度が低い画面では 1 インチあたりのピクセル数が少なくなりますが、ピクセル密度が高い画面では 1 インチあたりのピクセル数が多くなります。 Android ブラウザと WebView のデフォルト画面は中程度のピクセル密度です。特定の dpi 値を直接指定することもできます。この値の許容範囲は 70 ～ 400 です。 device-dpi は、デバイスのデフォルト dpi を使用してページを表示することを意味します。

注: すべてのスケーリング値は 0.01 ～ 10 の範囲内にある必要があり、それ以外の場合は無効になります。

CSS でのいくつかの異なる単位間の比較

px: ピクセル。相対的な長さの単位であり、サイズは画面の解像度によって決まります。

em: 長さの相対単位。現在のオブジェクト内のテキストと同等のフォント サイズ、またはインライン テキストの現在のフォント サイズが設定されていないとみなされる場合は、ブラウザのデフォルトのフォント サイズに対する相対的なフォント サイズ。 em の値は固定されておらず、親要素のフォント サイズを継承します。変更されていないすべてのブラウザは、1em=16px に準拠します。すると、12px=0.75em、10px=0.625emとなります。 font-size の変換を簡略化するには、CSS の body セレクターで Font-size=62.5% を宣言する必要があります。これにより、em 値は 16px*62.5%=10px となり、12px=1.2em、10px=1em となります。 , また、つまり、元の px 値を 10 で割って、単位を em に変更するだけです。

rem: CSS3 に追加された新しい相対単位。 em との主な違いは、rem を使用して要素のフォント サイズを設定する場合、相対サイズであることに変わりはありませんが、HTML ルート要素に対してのみ相対的なサイズであることです。このユニットは、相対サイズと絶対サイズの利点を組み合わせたものであると言えます。これにより、ルート要素のみを変更するだけですべてのフォント サイズを比例的に調整でき、レイヤーごとにフォント サイズが複合する連鎖反応を回避できます。現在、IE8 以前を除くすべてのブラウザが rem をサポートしています。これをサポートしていないブラウザの場合、解決策は非常に簡単で、追加の絶対単位ステートメントを作成することです。これらのブラウザは、rem で設定されたフォント サイズを無視します。

pt: 印刷業界で一般的に使用される単位で、一般にページ印刷と植字に使用され、ポンドを意味します。

%: さらに、パーセントを使用してサイズを指定することもできます。これは、ブラウザのデフォルトのフォント サイズに対する現在のフォントの倍数を表します。このユニットは、ページレスポンシブデザインでもよく使用されます。

vw/vh/vmin/vmax: 上で紹介したように、ビューポートの高さまたは幅に対するフォントのサイズを示します。