CSS: あまり知られていない 7 つの単位_html/css_WEB-ITnose

原文: 7 CSS Units You Might Not Know About

ご存知のとおり、CSS テクノロジーを使用すると、奇妙な問題に陥りやすくなります。そして、新たな問題に直面したとき、私たちは非常に不利な立場に置かれてしまいます。

しかし、Web の発展に伴い、新しいソリューションがゆっくりと成熟してきています。したがって、Web デザインおよびフロントエンド開発者としては、使用するツールやプロパティをよく理解し、それらを上手に使用できるようにするしかありません。

これは、たとえそれらの特別なツールや属性がめったに使用されないとしても、必要に応じて仕事で有効に活用できることも意味します。

今日は、これまで知らなかったかもしれないいくつかの CSS プロパティを紹介します。これは、px や ems などのいくつかの測定単位ですが、これまで聞いたことがない可能性が非常に高いです。見てみましょう。

rem

私たちがすでによく知っている単元とよく似た単元から始めます。 em は、現在のオブジェクト内のテキストに対する相対的なフォント サイズとして定義されます。 body 要素のフォント サイズを設定した場合、body の子要素の em 値は、body によって設定された font-size と等しくなります。

    <div class="test">Test</div>

body {    font-size: 14px;}div {    font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px}

div 内のフォント サイズは 1.2em で、これは div が親要素から継承するフォント サイズの 1.2 倍です。ここで、bodyのフォントサイズが14pxなので、divのフォントサイズは1.2*14=16.8pxです

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

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

これがまさに私たちが望むものである場所もいくつかありますが、多くの場合、単一の相対的な測定単位にのみ依存したいと考えます。このとき、rem を使用する必要があります。rem の r はルート要素を表し、その値はルート要素で設定されたフォント サイズになります。ほとんどの場合、ルート要素は html です。

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

上記の 3 つのネストされた div のフォント サイズはすべて 1.2*14px = 16.8px です。

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

Rems はフォントサイズだけでなく、グリッドレイアウトにも適しています。たとえば、グリッド レイアウト全体または UI ライブラリのサイズ単位として HTML ルート要素のフォント サイズに基づいて rem を使用し、他の特定の場所で em 単位を使用することができます。これにより、フォント サイズとスケーリングをより細かく制御できるようになります。

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

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

vh と vw

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

1vh はビューポートの高さの 1% に相当します。たとえば、ブラウザの高さが 900 ピクセルの場合、1vh = 900*1%=9 ピクセルになります。同様に、ビューポートの幅が 750 ピクセルの場合、1vw は 7.5 ピクセルになります。

幅広い用途があります。たとえば、たった 1 行の CSS コードを使用して、画面と同じ高さのボックスを実現する非常に簡単な方法を使用します。

.slide {    height: 100vh;}

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

demo

vmin と vmax

vh と vw はビューポートの幅と高さに相対し、vmin と vmax はビューポートの高さと幅の最小値または最大値に相対します。たとえば、ブラウザの高さと幅がそれぞれ 700px と 1100px の場合は、1vmin=7px、1vmax=11px、高さと幅がそれぞれ 1080px、800px の場合は、1vmin=8px、1vmax=10.8px となります。

それでは、これらの値はいつ必要になるのでしょうか?

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

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

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

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

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

ex と ch

単位 ex と ch は、現在のフォントとフォント サイズに応じて em と rem に似ています。ただし、em や rem とは異なり、ex と ch は、設定されているフォントに依存するフォントベースの測定単位です。

单位ch通常被定义为数字0的宽度。你可以在Eric Meyers的博客里找到关于它的一些有意思的讨论，例如将一个等宽字体的字母”N”的宽度设置为40ch,那么在另一种类型的字体里它却可以包含40个字母。这个单位的传统用途主要是盲文的排版，但是除此之外，肯定还有可以应用他的地方。

单位ex定义为当前字体的小写x的高度或者1/2的em。很多时候，它是字体的中间标志。

x-height; the height of the lower case x（read more about The Anatomy of Web Typography）

他们有很多的用途，但是大部分用于版式的微调。比如，sup元素（上角标字符），可以利用position:relative;bottom: 1ex;实现，同理，可以实现一个下角标文字。浏览器默认的处理方式是利用上标和下标特定垂直对齐规则，但是如果你想更细粒度更精确得控制，你可以像下面这样做：

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

 

总结

持续关注CSS的发展和扩展是非常重要的，这样你才能熟练运用你工具箱中特定的工具。说不定将来你遇到的某个特殊的问题就需要使用这些复杂的单位来解决。花点时间去阅读新的技术规范，注册订阅一些不错的网站或者资源，类似 cssweekly这样的。 当然不要忘记现在就去注册像Tuts+这样的网站来获取每周的更新，课程，免费教程还有资源！

扩展阅读

More CSS unit goodness.

Taking the “Erm..” Out of Ems

Taking Ems Even Further

Caniuse Viewport units

原文首发：http://www.ido321.com/1301.html