あなたの知らない 7 つの CSS ユニット about_html/css_WEB-ITnose-htmlチュートリアル-php.cn

あなたの知らない 7 つの CSS ユニット about_html/css_WEB-ITnose

WBOY

リリース： 2016-06-21 09:11:08

オリジナル

905 人が閲覧しました

原文ソース: @Jonathan Cutrell 翻訳ソース: w3cplus - Baizhou

新しい問題が発生したときに、使い慣れた CSS テクノロジーを取り除くことができなくなるのは簡単です。

Web が発展し続けるにつれて、新しいソリューションの必要性は増加し続けます。したがって、Web デザイナーおよびフロントエンド開発者として、ツールセットを理解し、それに慣れる以外に選択肢はありません。

これは、特別なツールについても知る必要があることを意味します。これは、頻繁には使用されないが、必要な場合には適切なツールです。

今日は、これまで知らなかったかもしれないいくつかの CSS ツールを紹介します。これらのツールはすべてピクセルや相対単位などの測定単位ですが、聞いたことがないかもしれません。確認してみましょう。

レム

すでによく知っていることから始めましょう。 em 単位は現在のフォントサイズとして定義されます。たとえば、body 要素にフォントサイズを設定すると、body 要素内のすべての子要素の em 値はそのフォントサイズと同じになります。

<body>    <div class="test">Test</div></body>body {    font-size: 14px;}div {    font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px}

ログイン後にコピー

ここでは、この div のフォントサイズは 1.2em であるとします。これは、継承されたフォントのサイズの 1.2 倍 (この場合は 14px) です。結果は 16.8px です

しかし、各要素内で定義されたフォントサイズをカスケードするとどうなるでしょうか?以下のコードスニペットでは、上記とまったく同じ CSS を適用し、各 div は親ノードからフォントサイズを継承し、フォントサイズを増加させます。

<body>    <div>        Test <!-- 14 * 1.2 = 16.8px -->        <div>            Test <!-- 16.8 * 1.2 = 20.16px -->            <div>                Test <!-- 20.16 * 1.2 = 24.192px -->            </div>        </div>    </div></body>

ログイン後にコピー

これが必要な場合もありますが、一般的には、一意のメトリクスに基づいてスケーリングする必要があるでしょう。この場合、rem を使用する必要があります。 rem の「r」は「root」を表します。これは、ルート要素に基づいてフォントサイズを設定することと同じです。ほとんどの場合、ルート要素は html 要素です。

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

ログイン後にコピー

前の例では、3 つのネストされた div のフォントサイズの計算はすべて 16.8 ピクセルでした。

グリッドレイアウトの利点

rem はフォントサイズの定義に役立つだけではありません。たとえば、rem を使用して、HTML ルート要素のフォントサイズに基づいてグリッドシステムまたは UI スタイルライブラリ全体を作成し、特定の場所で em 比例スケーリングを使用できます。これにより、フォントサイズとスケーリングがより予測可能になります。

すごいです

概念的には、このような戦略の背後にある考え方は、インターフェースをコンテンツに比例して拡張できるようにすることです。ただし、これはすべての場合に必ずしも意味があるわけではありません。

「レム（ルートエム）ユニット」の互換性リスト。

vh および vw

レスポンシブ Web デザイン手法は、比率ルールに大きく依存しています。ただし、CSS スケールがすべての問題に対して常に最適な解決策であるとは限りません。 CSS の幅は、最も近い親要素を含む親要素を基準とします。親要素の幅の代わりに表示ウィンドウの幅または高さを使用したい場合はどうすればよいでしょうか?これはまさに vh および vw ユニットが提供するものです。

vh はビューポートの高さの 1/100 に等しくなります。たとえば、ブラウザの高さが 900px の場合、1vh で得られる値は 9px です。同様に、表示ウィンドウ幅が750pxの場合、1vwで得られる値は7.5pxとなります。

これらのルールには無限の用途があるように見えます。たとえば、高さいっぱい、または高さほぼいっぱいのスライドを 1 行の CSS だけで非常に簡単な方法で作成できます。

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

ログイン後にコピー

画面の幅を埋めるタイトルが必要だと想像してください。これを行うには、vw を使用してフォントサイズを設定します。このサイズはブラウザの幅に比例して拡大します。

ビューポート単位の互換性リスト: vw,vh"。

vmin と vmax

vh と vm は、今回の幅と高さに関係する vmin と vmax とは異なり、常にビューポートの高さと幅に関係します最大値と最小値はどちらが大きいか小さいかによって異なります。たとえば、ブラウザが幅 1100 ピクセル、高さ 700 ピクセルに設定されている場合、1vmin は 7 ピクセル、1vmax は 11 ピクセルになります。は 1080px に設定されており、1vmin は 8px に等しく、1vmax は 10.8px になります

それでは、これらの値をいつ使用するのでしょうか

100 未満の高さと幅の設定を使用して要素を画面上に表示する必要があると想像してください。たとえば、画面の少なくとも 2 つの側面に常に接触する正方形の要素は、次のように定義できます。

.slide {    height: 100vh;}

ログイン後にコピー

常にビューポートを覆う正方形が必要な場合 (常に 4 つの側面に接触)。

これらのルールを組み合わせると、非常に柔軟な新しい方法でビューポートを利用できるようになります。

ビューポート単位: vmax。、vmax」の互換性リスト。

ex と ch

ex と ch の単位は、em と rem と同様に、現在のフォントとフォントサイズに依存します。ただし、em や rem とは異なり、これら 2 つのユニットは特殊なフォントベースの動作に基づいて設計されているため、font-family にのみ依存します。

ch单位，或者字符单位被定义为0字符的宽度的“先进的尺寸”。在“Eric Meyer’s的博客”中可以找到一些非常有趣的讨论关于这意味着什么，但是基本的概念是，给定一个等宽字体的字体，一个N个字符单位宽的盒子，比如width：40ch;,可以一直容纳一个有40个字符的应用那个特定字体的字符串。虽然这个特殊规则的传统用途与列出盲文有关，但是这里创造性的可行性一定会超越这些简单的用途。

ex单位被定义为”当前字体的x-height或者一个em的一半”。给定的字体的x-height是指那个字体的小写x的高度。通常，这是这个字体的中间的标志。

x-height:小写字母x的高度(阅读更多关于The Anatomy of Web Typography)

对于这种单位有很多的用途，大多数是用于排版的微调。例如，sup元素,代表上标，可以用相对定位和一个1ex的底部值在行内被推高。类似地，你可以拉低一个下标元素。浏览器默认支持这些利用上标和下标特性的vertical-align规则，但是如果你想要更精细的控制，你可以像这样更明确的处理样式：

sup {    position: relative;    bottom: 1ex;}sub {    position: relative;    bottom: -1ex;}

ログイン後にコピー

ex单位在CSS1中已经存在，但是你不会找到对ch单位有像这样坚实的支持。具体支持，在Eric Meyer’s 的博客中查看CSS单位和值。

结论

密切关注CSS的持续发展和扩张是非常重要的，一边在你的工具集里知道所有的工具。也许你会遇到一个特殊的问题需要一个意想不到的解决方案，利用这些更隐蔽的计量单位之一。花时间去阅读新规范，记录来自好的资源的新闻资讯！