TIL 005 CS Responsive Unit(応答単位)

8105 ワード
CSS responsive em_rem TIL はんのうがた テキストリンク

🎯 水がいっぱい入ったコップのように、反応型サイトに提供される設備を学びましょう。



1. Absolute length units


px


画面上の最小ディスプレイユニット
  • px使用中の問題点:
  • コンテナのサイズが変わっても内容は変わらない
  • ユーザーが直接フォントサイズ設定を変更しても反応しない

    • 2. Relatvie length units


    em

  • フォントライブラリで現在指定されているフォントサイズ
  • 親のフォントサイズに乗じた値
  • relative to parent element
  • emの欠点は、多用すると複雑な構造内ではすぐにその値を知ることが難しいこと

    • rem

  • 親フォントサイズに関係なく、ルートで指定したフォントサイズに依存します.
  • relative to root element
  • 複雑な構成でもその値を容易に求めることができる.

    • vw

  • 1% of the viewport's width
  • 100 vw:ブラウザ全体を使用することを示す
  • 50 vw:半分使うブラウザ幅を示す

    • vh

  • 1% of the viewport's heigth
  • 100 vh:ブラウザ全体の高さを表示する
  • 50 vh:半分使うブラウザの高さを示す

    • %

  • Relative to the parent element
  • 1em=100%
  • 2em=200%
  • 0.5em = 50%

    • 👀 それぞれいつ使えばいいですか？

  • 親要素のサイズ変更が必要な場合は…%em
  • 親に関係なくブラウザサイズに応じて反応するなら…v*, rem
  • エレメントの幅や高さに合わせて寸法を変更する必要がある場合は…%v*
  • fontサイズ変更が必要なら…em, rem

    • 💦反応単位の利用


    1) em for padding

  • emを使用して要素のfont-sizeを反作用型に設定してもpaddingをpxに固定すると、ユーザーがfont sizeを調整するとpaddingは変わらないという問題が発生する
  • paddingもfont sizeに従って変更する必要がある場合、emを使用してfont sizeが変化した場合にpaddingもそれに応じて変化させる
  • Media queryを使用する場合、画面ごとにfont sizeが変更されるとfont sizeに従ってpaddingが変更され、より反応性が得られる.

    • 2) em vs rem for padding


    titleとcontentsのフォントサイズが異なるremを使用する場合、padding値の設定例

    html

    <section class="component">
  <header class="title">Master Front-end ✨</header>
  <p class="contents">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sapiente
    veniam, nulla porro distinctio aliquid, quos quidem odio consectetur
    aperiam, delectus cum. Deserunt facilis excepturi similique natus minus
    deleniti rem sit?
  </p>
</section>

    CSS

     .component {
   width: 50%;
   border: 1px solid red;
   font-size: 2rem;
 }
 
 .title {
   backgorund-color: red;
 }
 
 .contents {
   font-size: 1rem;
 }
 
 @media screen and (max-width: 48rem) {
  .component {
    font-size: 1.5rem;
    }
  }
  • 上記の例では、titleとcontentsはそれぞれ2 remと1 remであるため、2つの要素に同じpadding:0.5 em値を与えると、相対的に異なるフォントサイズになるため、titleに適用されるpaddingとcontentsに適用されるpaddingの値は異なる.
    • .title {
  padding: 0.5em;
  background-color: burlywood;
}

.contents {
  font-size: 1rem;
  padding: 0.5em;
}

  • em充填を使用するのは良いですが、各要素が固定的な充填を維持する必要がある場合はremを使用するのが望ましいです.

  • 左揃えrem、上下揃えemは、現在のフォントサイズの影響を受けずにすべての要素を垂直に揃えます.

    • .title {
  padding: 0.5em 0.5rem;
  background-color: burlywood;
}

.contents {
  font-size: 1rem;
  padding: 0.5em 0.5rem;
}

  • Media query設定によりスクリーン幅が48 remに対して変化した場合は、左右、上下の塗りつぶし値をチェックしてください!

    • 👀参考資料:
    1. たんいけいさんき
    2. エンコードサムネイル-単位サンプルビデオ
    Androidテクノロジー----Activityソース
    モデルの改善