可変サイズ単位/em、%、rem、vw、vh、vmin、vmax

3669 ワード
vmax && rem vmin vh vw EX em テキストリンク
pxのような固定サイズ単位ではなく、周囲のフォントサイズを基準に変化する単位です!
ひとつひとつ聞いてみよう

em


たまに1 em、2 emを見かけます.を選択します.
¥スタンダード:親の文字
<style>
        div {
            font-size: 3em;
        }
        p {
            font-size: 2em;
        }
    </style>
</head>
<body>
    <div>
        hello lion
    </div>
    <p>
        hello tiger 
    </p>
</body>
しゅつりょく

(親のサイズ値*子のem値)=子が持つサイズ値
em単位のdivとpを使う両親はbodyです.
font-sizeはbodyには適用されず、デフォルトサイズ16 pxに基づいています.
pは16*2,divは16*3である.
div>div>divというレイアウトなら
結果は16 * 3 * 3 * 3でした.

%


100%値1.
¥スタンダード:親の文字
親が20 pxと呼ぶ場合、font-size:50%を適用するといくらになりますか?
はい、10 pxです.簡単でしょう.

vw / vh


見えるページ画面を基準に決めたいのですが?!
では、vw/vhを使うべきです.
これはスクリーンスケール単位ですが、試してみますか?
div {
	width : 50vw;
    heigh : 100vh;
    }
これで書けます!貼らなくてもパーセンテージという事実に注意!

v-min / v-max


vmin:ブラウザウィンドウの高さと幅のより小さい値による割合
vmax:ブラウザウィンドウの高さと幅のより大きな値に基づいてパーセントを計算します.
! コメントリンク
https://webclub.tistory.com/356
+他のブログで見た記事

相対サイズ単位を使用します。


CSSでのピクセル単位サイズの使用は推奨されません.
従来のディスプレイと4 K以上のスクリーンが徐々に一席を占めるにつれて、モバイルスクリーンと反応式Webサポートが必要となり、複数のppi(Pixel Per Inch)を持つデバイスサポートがCSSの作成の鍵となっている.
画素単位のpx表示と比較して、相対サイズ単位emおよびremを使用し、vwおよびvhなどの相対スケールのレイアウトサイズを積極的に使用することを推奨します.
特に、テキストに関連するプロパティには相対サイズ単位を使用する必要があります.レイアウトサイズや余白などの内部要素にも相対サイズ単位を使用します.
ソース:https://blogpack.tistory.com/997?category=804108
画素の使用には惯れましたが、相対的な大きさを试してみましょう.
DOM TREE構造の理解
Day 08. 選択者優先度、可変サイズ