Day_1.「完璧な Web デザイン」_柔軟なテキスト_html/css_WEB-ITnose

一般的な方法

body{    font-size:12px;}

ピクセル単位を使用する利点:

どのブラウザやデバイスを使用して表示しても、テキストは同じサイズで表示されます。

なぜこれが完璧ではないのでしょうか?

テキスト サイズをピクセル単位で設定した後、Windows プラットフォームの IE ユーザーはブラウザのテキスト サイズを自由に変更できません。

レスポンシブ開発には適していません

どのようなオプションがありますか?

長さの単位

em: 親要素のフォント サイズに対する相対値

ex: 特定のフォントの文字 x の高さに対する相対値

px: 特定のデバイスの解像度に対する相対値最も一般的に使用される単位

rem : ルート要素のフォント サイズに基づいて計算された値

さらに、印刷時に便利な絶対単位がいくつかありますが、ここではリストされていません。

相対的なサイズを表すキーワード

大きい

小さい

パーセント値

絶対的なサイズを表すキーワード

xx-small

x-small

小

中

大

x -large

xx-large

その差は 1.5 倍です

完璧な解決策:

ピクセルレベルの精度を放棄したキーワード + パーセンテージ

使用法:

  body{      font-size:small;  }  h1{      font-size:150%;  }

注意事項:

パーセンテージは親要素に基づいて設定されるため、ネストされたパーセンテージは注意して使用してください

em

を介した柔軟なテキスト

使用法:

  body{font-size:62.5%;} /* 设置为10px大小*/

注:

em ネストの問題もあります

rem Unit

rem を使用すると、コンテキストやネストを考慮する必要がなく、ルート要素に基づいてサイズを指定するだけです。

レスポンシブで使用されるいくつかの単位を補足します

vh と vw

レスポンシブ Web デザインはパーセンテージと切り離せません。ただし、CSS パーセンテージがすべての問題に対して最適な解決策であるわけではありません。 CSS の幅は、CSS を含む最も近い親要素の幅に相対します。しかし、親要素の代わりにビューポートの幅または高さを使用したい場合はどうすればよいでしょうか?これが vh ユニットと vw ユニットによって得られるものです。

1vh はビューポートの高さの 1/100 に相当します。栗: ブラウザの高さ 900 ピクセル、1 vh = 900 ピクセル/100 = 9 ピクセル。同様に、ビューポートの幅が 750 でない場合は、1vw = 750px/100 = 7.5 px となります。たとえば、たった 1 行の CSS コードを使用して、画面と同じ高さのボックスを実現する非常に簡単な方法を使用します。

  .slide{      height:100vh;  }

vmin と vmax

vh と vw はビューポートの高さと幅に基づきますが、vmin と vmax はビューポートの高さと幅の最小値または最大値に基づきます。ビューポート。たとえば、ブラウザの幅は 1100 ピクセル、高さは 700 ピクセル、1vmin = 7px、1vmax = 11px に設定されます。幅が 800px に設定され、高さが 1080px に設定されている場合、1vmin は 8px に等しく、1vmax は 10.8px です。

次のように、少なくとも 2 つの辺が画面に接触する正方形を定義できます:

  .box{      height:100vmin;      width:100vmin  }

この正方形のフレームが常にビューポート全体の表示領域をカバーするようにしたい場合 (4 つの辺が常に接触している)画面の 4 つの側面)

  .box{      height:100vmax;      width:100vmax;  }

これらのユニットを組み合わせて使用​​すると、ビューポートのサイズを柔軟に利用する新しい興味深い方法が得られます。