モバイル端末開発、あなたが知らないかもしれないいくつかの CSS ユニット プロパティ。 _html/css_WEB-ITnose

1. rem

「em」単位は、現在の要素の親要素の単位サイズに基づいて、「rem」の単位を設定することを意味します。 " は "ルート" を表し、ルート (つまり "html") 要素の単位サイズに基づいて現在の要素の単位サイズを設定することを意味します。 したがって、現在の要素が子ノードであるかどうかに関係なく、単位サイズが設定されると、 「rem」にすると、この要素のサイズは になります。 ルート要素単位に基づき、ここでの「em」と「rem」は両方とも継承されます。

2. vw と vh (モバイル開発における個人的なお気に入りのユニット属性、およびこの紹介の焦点)

従来のレスポンシブ開発では、レイアウトにパーセンテージを使用することがよくありますが、これは最良の解決策ではありません。たとえば、体の身長に基づいてパーセンテージを設定することはできません。

「vw」の完全名は「viewport width」、つまりウィンドウの幅です。「vh」の完全名は「viewport height」、つまりウィンドウの高さです。

1vw = viewportWidth * 1/100; 1vh = viewportHeight * 1/100;

したがって、要素は幅と高さの単位として「vw」と「vh」を使用し、さまざまなデバイスに確実に適応できます。

3. vmin と vmax

「vmin」は「ビューポート」の幅と高さの間の最小のものです。 (つまり、現在の要素単位が「vmin」に設定されている場合、ブラウザは幅と高さを決定し、小さい方の値を継承します)

"vmax" 同様に、幅と高さの比較を継承し、大きい方の値、つまり、幅または高さの大きい方が大きい方の値を継承します。

ここでは、ブラウザの幅は 1300 ピクセル、高さは 960 ピクセルであると仮定します。 ex と ch

これら 2 つのユニットは日常の開発ではほとんど使用されないため、ここでは詳しく説明しません。これら 2 つの単位の意味を説明した図を次に示します。興味がある場合は、情報をご自身で確認してください。