意外と知られていない 7 つの CSS 単位_html/css_WEB-ITnose

私たちはテクノロジーに精通していますが、それを使用するプロセスで簡単に行き詰まり、新しい問題が発生したときに不利な立場に置かれます。 Web が進化し続けるにつれて、新しいテクノロジーと新しいソリューションに対する要件は増大し続けます。したがって、Web デザイナーやフロントエンド開発者として、あらゆる戦いで無敵でいられるように、自由に使えるツールに慣れ、自分自身と敵を知る以外に選択肢はありません。

ということは、普段はほとんど使わないけど、どこかで必要になると、本当に完璧なアイテムがいくつかあるということです。

今日は、これまであまり見たことがないかもしれない CSS のやつを紹介します。それぞれはピクセルや em などの測定単位ですが、これらについて聞いたことがないかもしれません。一緒に友達を作りましょう~

rem

まずは私たちがよく知っている商品とよく似た商品を紹介しましょう。 em は、現在のオブジェクト内のテキストに対する相対的なフォント サイズとして定義されます。正直に言うと、本文の font-size を設定すると、本文の子要素の 1em は本文で設定された font-size と等しくなります。

1 1body { ほら、ここのdivのフォントサイズは1.2emです。説明すると、ボディパパから引き継いだフォントサイズ（ここでは14px）の1.2倍で、結果は16.8pxになります。

2 3	Test
2 3 4 5 6	font-size: 14px; } div { font-size: 1.2em; // で計算されます14px * 1.2, or 16.8px }

しかし、emを使ってネストされた要素のフォントサイズを1つずつ定義するとどうなるでしょうか？次のスニペットでは、上記と同じ CSS を適用し、各 div は親要素からフォント サイズを継承し、徐々に大きくします。

1

2

3

4

5

6

7

8

9

10

11

テスト6px -->

テスト

例

これがまさに私たちが望むものである場所もいくつかありますが、多くの場合、単一の相対的な測定単位に依存したい場合があります。現時点では、rem を使用できます。 「r」は「root」の略語で、1rem がルート要素のフォント サイズに等しいことを意味します。ほとんどの場合、ルート要素は です。

1 2 3 4 5 6

html { font-size: 14px; } div { font-size : 1.2rem; }

このように、上記の 3 つのネストされた div のフォント サイズはすべて 1.2*14px = 16.8px になります。

グリッドレイアウトに適しています

Remsはフォントサイズの設定に便利なだけではありません。別のアイデアとして、HTML ルート要素のフォント サイズに基づいて rem をグリッド レイアウト全体または UI ライブラリ全体のサイズ単位として使用し、その後、他の特定の場所で em 単位を使用することができます。これにより、フォント サイズとスケーラビリティをさらに制御できるようになります。

1 2 3

.container { width: 70rem; // 70 * 14px = 980px }

概念的には、このメソッドのアイデアは、コンテンツに応じてインターフェイスをスケーリングできるようにすることです。ただし、これはすべての状況で意味があるわけではありません。

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;

}

画面と同じ幅のタイトルが必要だとします。 タイトルのフォントサイズの単位を vm に設定し、フォントサイズを に設定するだけです。タイトルは自動的に表示されます。フォントとビューポートのサイズを同期するために、ブラウザの幅に応じて拡大縮小する方法はありますか? ！

例

vmin と vmax

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

それで問題は、この 2 つのユニットをどのようなシナリオで使用するべきかということです。

要素があり、それを画面上に常に表示する必要があるとします。高さと幅に vmin 単位を使用し、100 未満の値を指定するだけです。別の例として、少なくとも 2 つの辺が画面に触れている正方形を定義できます。

幅 : 100vmin;

}

この四角い枠がビューポート全体の表示領域を常にカバーしたい場合（4つの辺が常に画面の4つの辺に接する）

ex と ch の単位は、em と rem と同様に、現在のフォントとフォント サイズに依存します。ただし、これら 2 つの項目はフォントの測定単位に基づいており、設定されているフォントに依存するという違いがあります。

1 2 3 4

.box { 高さ: 100vmax; 幅: 100vmax; ex と ch

ch単位は通常、数値0の幅として定義されます。これについては、Eric Meyers のブログで興味深い議論がいくつかあります。たとえば、等幅フォントの文字「N」の幅が 40ch に設定されている場合、別のタイプのフォントでは 40 文字を含めることができます。このユニットの伝統的な用途は主に点字の組版ですが、それ以外にも応用できる場所は確かにあります。

ex は、現在のフォントの小文字 x 文字の高さ、または 1em の 1/2 として定義されます。多くの場合、それはフォントの中央のマークです。

x-height; 小文字の高さ x

これらの単位は、主にレイアウトの微調整に使用されます。たとえば、sup 要素 (上隅のテキスト マーク) は、position:relative;bottom: 1ex; によって実装できます。同様の方法で、下隅のテキスト マークを実装できます。ブラウザのデフォルトの方法では、上付き文字と下付き文字に固有の垂直方向の配置ルールを使用しますが、よりきめ細かく正確に制御したい場合は、次のようにすることもできます:

1

2

3

4 [最新のドキュメント更新については、Shangxuetang www.sxt.cn に参加してください] [プロフェッショナルな IT トレーニング機関、本当に頭金ゼロの入学 www.bjsxt.com]

5 6 7 8 sup { 位置:相対; 下位:1ex; }

sub { 位置:相対; 下位:-1ex ; } 結論 自由に使えるツールのスキルを完全にマスターできるように、進化し続ける CSS テクノロジーに注目し続けることが重要であることは間違いありません。おそらく、将来、これらの複雑なユニットを使用して解決する必要がある特別な問題に遭遇することになるでしょう。時間をかけて新しい技術仕様を読み、cssweekly などの優れた Web サイトやリソースにサインアップしてください。そしてもちろん、毎週のアップデート、コース、無料のチュートリアルやリソースを入手するには、TUTS+ のようなサイトに今すぐサインアップすることを忘れないでください。

北京 Shangxuetang-cctv CCTV ネットワーク広告パートナー、プロフェッショナルな IT最も評判の高い Java トレーニング、iOS トレーニング、Android トレーニング、Hadoop ビッグデータ トレーニング、Web フロントエンド トレーニング機関、入学金 0 元、最初に雇用、後払い、平均雇用給与 9,500 以上。