[CSS]反応型ページを作成するときはどの単位がいいですか?

19988 ワード
CSS テキストリンク
テーマコンテンツCSSユニット反応式Webを作成する場合、どの単位を使用すればよいですか?

1.単位分類


絶対値相対値cmemmrempxvvh%

1-1.絶対単位px


pxの問題は?
容器のサイズが変更されても、内容は変わらない値になります.

下の画像のように、内容が切り取られています.

font sizeをpxと書くと、ブラウザでフォントサイズの設定を変更したときに、ユーザーが全く反応しないのが見えます.

1-2.相対単位vw,vh


ビューポートとは、表示される領域を指します.

vwはViewport Widthの略です.ユーザーのブラウザ画面が600 pxの場合、1 vwの値は?6 pxです.800 pxの場合、1 vwは8 pxです.幅を変更するたびに、ブラウザは1 vwの値を自分で再計算します.メディアクエリーを作成する必要がなく、vwを使用してブラウザサイズに応答し、自分で変更できます.


vhはViewport Heightの略です.

1-3.相対単位vmin、vmax




1-4.相対単位em


<body>
  <div class="level1">
    <h1>level 1</h1>
    <div class="level2">
      <h1>level 2</h1>
      <div class="level3">
        <h1>level 3</h1>
        <div class="level4">
          <h1>level 4</h1>
        </div>
      </div>
    </div>
  </div>
</body>
.level1 {
  font-size: 2em;
}

.level2 {
  font-size: 2em;
}

.level3 {
  font-size: 2em;
}

.level4 {
  font-size: 2em;
}

1-5.相対単位rem


<body>
  <div class="level1">
    <h1>level 1</h1>
    <div class="level2">
      <h1>level 2</h1>
      <div class="level3">
        <h1>level 3</h1>
        <div class="level4">
          <h1>level 4</h1>
        </div>
      </div>
    </div>
  </div>
</body>
.level1 {
  font-size: 2rem;
}

.level2 {
  font-size: 2rem;
}

.level3 {
  font-size: 2rem;
}

.level4 {
  font-size: 2rem;
}

htmlフォントサイズのみを見るので計算が容易で、直感的に値を適用できます.
フォントサイズを決定する場合は、emではなくrem을 선호한다.を選択します.

2.例


2-1.em



親要素のフォントサイズに応じて変化するemを使用してボタンを作成すると、bodyとheaderの2つの要素のサイズが変化します.

2-2.rem



上位要素に基づいて要素のサイズが決定されるため、remを使用してボタンを作成する場合、bodyにコンポーネントを書き込む場合や他のコンポーネントにボタンを書き込む場合とボタンのサイズは変わりません.つまり、ページのどのボックスでも使用され、サイズは固定されています.

もし私のコンポーネントがページのどこでも固定サイズが必要なら、remを使いましょう。


逆に、私のコンポーネントが親要素に基づいて動的に変更する必要がある場合は、emを使用します。


2-2.Emvs rem例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>em vs rem</title>
    <link rel="stylesheet" href="rem_demo.css" />
  </head>
  <body>
    <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>
  </body>
</html>
.component {
  width: 50%;
  border: 1px solid burlywood;
  font-size: 2rem;
}

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

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

@media screen and (max-width: 780px) {
  .component {
    font-size: 1.5rem;
  }
}
コンテナを作成する場合は、emおよびremよりも%を使用します.どうしたんですか.emとremは反応型unitでフォントサイズの割合で変化する子供なので、最終的にはこれらの子供にも一定の値があります.
フォントサイズは2 rem、内容は1 remです.また、メディアクエリを使用すると、ブラウザサイズが780ピクセル未満の場合、コンポーネントの選択サイズが1.5 remに減少することがわかります.
タイトルと内容のダウンジャケットは0.5 em 0.5 rem.どうして0.5 emと0.5 remを入れますか?contentsのフォントサイズは1 remです.つまりダウンジャケットは0.5で、フォントサイズの半分がダウンジャケットであることを意味します.ダウンジャケット全体を0.5 emで与えると、下の画面のように垂直に揃えることはありません.現在のフォントの大きさによってフォントの相対的な大きさが決定されるため、タイトルのフォントサイズはコンテンツフォントのサイズよりも大きいため、より多くのダウンジャケットがあり、垂直に揃えることができません.下の画面で確認してみましょう.

各要素が固定されたダウンジャケットを維持する場合はremを使用するのが望ましい.垂直位置合わせを維持するために、上下に0.5 em(フォントサイズに応じてダウンジャケットを調整)ずつ、両側に0.5 remを使用し、フォントサイズにかかわらず固定すれば垂直位置合わせが可能になりました.だから、emやremの中から1つを選んで使うよりも、私のデザインに合わせて柔軟に使うほうがいいです.

3.いつ使いますか。


1.親要素の寸法に基づいて寸法を変更する必要がある場合は、%またはemを使用します。


2.親にかかわらず、ブラウザサイズに反応する必要がある場合はviewportまたはremを使用します。


3.エレメントの幅と高さに基づいて寸法を変更する必要がある場合は、%またはviewportを使用します。


4.フォントサイズに応じてサイズを変更する必要がある場合は、em,remを使用します。


注意:DREAMエンコーディング
GOエッセイ-ユニットテスト-ベンチマークテスト
プログラマ文字列で任意にソート