TIL反作用レイアウトのユニット:rem、em、v*、%

この記事はDREAMコードELLOHを見て整理したものです.

▼▼

1、2回のプロジェクトをして、自分が反応型レイアウトに慣れていると思っていましたが、単位の理解がなく、remだけを使っていました.
適切な単位を使うことが非常に重要であることに気づいた後
職場の概念を再整理したいです.

📏 Absolute length units

📏 ディスプレイ上の最小単位px

pxはabsolute lenght unitsで最も多く使用されるユニットである.

絶対、容器の大きさにかかわらず固定です.

つまり、画面サイズに応じて適切なサイズのUIを描画できないという欠点がある.

また、ユーザがフォントサイズを個別に設定してもフォントサイズは変更されない.

📐 Relative length units

Summary

em:親のフォントサイズで決まる

rem:rootのフォントサイズで決定

vw:ビューポート幅の1%

vh:ビューポートの高さの1%

vmin:高さと幅の小さい値の相対値
->デスクトップの場合vh

vmax:高さと幅の大きな値の相対値
->if mobile,vw標準

%:親要素の相対サイズ

📐 Emとrem

<div class='parent'>
   Parent
   <div class='child'>Child</div>
</div>

em

.parent{
  font-size:  8em;
  // default size는 16px
  // 8em = 16 * 8 = 128px
  // 8em = 800%
}

.child{
  font-size: 0.5em;
  // 부모의 0.5배인, 64px
  // = 50%
}

->em親基準で計算すると、オーバーラップが多ければ多いほど、emを直感的に理解することは難しくなります.

rem

.parent{
  font-size:  8em;
  // default size는 16px
  // 8em = 16 * 8 = 128px
}

.child{
  font-size: 0.5em;
  // 16 * 0.5 = 8px
}

📐 v*

vw

スクリーン幅ベース
->100 vw:縦横
->50 vw:画面幅の反転

vh

スクリーン幅ベース
->100 vw:高さフル
->50 vw:画面の高さの反転

vmin & vmax

vmin:幅と高さの小さい値の基準値

vmax:幅と高さの大きい値の基準値

1番の場合、a=50 vmax、b=50 vmin
2号の場合、a=50 vmin、b=50 vmax

🤔 いつ使いますか。

📌 親ベースまたはブラウザ

親基準に変更する必要がある場合は%またはem

ブラウザによる変更が必要な場合は、v*またはrem

📌 領域またはフォントサイズに基づく

box(領域ベース)→%,v*

font → em, rem

✔ご希望の部品のサイズにより

rem単位で「良い」ボタン要素が作成された場合、ボタンは任意の場所に属するのと同じサイズに固定されます.

em単位を使用している場合は、サイズは所属する場所によって異なります.

rem

位置に応じて寸法を調整する必要がある場合、em

✔コンテンツエリアの%またはv*は反作用レイアウトに適用

remまたはemはfont-sizeに基づいて移動し、領域の単位として使用できません.

✔emとremの混用(ベスト)

両側のpaddingをemに設定すると、フォントサイズに応じて異なる値が計算され、テキストを整列できません.remを使用して両側のpaddingを固定すると、同じ基準のルートをソートできます.

✔メディアクエリ固定pxではなくremを使用

固定px値ではなくremを使用すると、より柔軟なレイアウトを作成できます.

結論

コンテンツ領域は%またはv*です.
fontの場合、ルート標準はremを使用し、親標準はemを使用します!!
の最後の部分

リファレンス

フロントエンド強制応答CSSユニット合計数:https://www.youtube.com/watch?v=7Z3t1OWOpHo
フロントエンド強制応答CSSユニットemおよびrem:https://www.youtube.com/watch?v=xWMKz9NCD0k