rem, vh, vw, vmin, vmax

2019年9月8日 22:22

rem

em は現在の font-size を定義します。一例として,body タグにem値を用いてフォントサイズを指定すると,すべての子供の要素はbodyのフォントサイズに影響されます。

<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にfont-sizeを1.2emに指定しました。この例題では14pxを基準に1.2倍のフォントサイズで表現になります。結果的に16.8pxの大きさになります。

ところで,ここにemと定義したフォントサイズをそれぞれの子息に宣言すると,どんなことが起こるでしょうか。同じ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;
}

以前のあちこちで作った複雑な段階の税divはすべて16.8pxのフォントサイズで表現されました。

グリッドシステムにいいです。
remはフォントでのみ使用されません。たとえば,グリッドシステムやrem を用いた基本フォントサイズベースで作ったUI スタイル,そしてem を用いて特定の位置に特別なサイズを指定することもできます。より正確なフォントサイズやサイズ調整を可能にします。

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

vhとvw

反応型ウェブデザイン技術はパーセント値に相当依存しています。しかしCSSのパーセント値がすべての問題を解決できる良い方法ではありません。 CSSの幅の値は最も近い親要素に相対的な影響を受けます。幅と高値を親要素の幅値のビューポートに合わせて使うことができます。 vhとvw単位がそのような意図に合う単位です。

vh要素は高さ値の100分の1の単位です。例えば、ブラウザの高さ値が900pxの時1vhは9pxという意味になります。彼と同様にビューポートの幅の価格が750pxの裏1vwは7.5pxになります。

この規則には限りない使用方法があります。例えば,最大の高値や彼の類似の高さのスライドを製作する際に,とても簡単なCSS だけ入力すればよいです。

.slide {
    height: 100vh;
}

スクリーンの幅値にぎっしり詰まるヘッドラインを作る為にvwでフォントサイズを指定すると容易に達成できます。あのサイズはブラウザの幅に合わせて変わります。

vminとvmax

vhとvwが常にビューポートの幅値と高値に相対的な影響を受ける場合,vminとvmaxは,幅の値と高さによって最大,最小値を指定することができます。例えばブラウザの大きさが1100pxの幅、そして700px高さの時1vminは7pxになって1vmaxは11pxになります。幅の値段がさらに800pxになって高さ値が1080pxになるとvminは8pxになってvmaxは10.8pxになります。

いつもスクリーンに見える要素を作るとしたら高さ値と幅の値をvminを使用して100に指定します。例えば,タッチ画面の両辺に並ぶ正方形の要素を作る際は,このように定義すればいいです。

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

ビューポート画面に見えなければならない(すべての君の変異スクリーンにみっしり詰まっている)場合には同じ値をvmaxに適用すればいいです。

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