CSSの単位emとremの違いは何ですか-htmlチュートリアル-php.cn

CSSの単位emとremの違いは何ですか

零下一度

リリース： 2017-06-24 11:43:58

オリジナル

2111 人が閲覧しました

CSSで最も一般的に使用される単位の長さは、px、em、remです。これら3つの違いは次のとおりです。

Pxは、一度設定すると、ページサイズに合わせて変更することはできません。

em と rem は px よりも柔軟性があり、相対的な長さの単位であるため、長さが固定されず、レスポンシブレイアウトに適しています。

em と rem の違いは 1 つの文に要約できます。em は親要素に相対的であり、rem はルート要素に相対的です。

rem の r はルートを意味しますが、理解するのは難しくありません。

子要素のフォントサイズのemは親要素のフォントサイズを基準とします
幅/高さ/パディング/要素のマージンは em 内にあります。相対的です。要素の font-size

のコード:

<div>我是父元素div<p>我是子元素p<span>我是孙元素span</span></p></div>

ログイン後にコピー

div {
  font-size: 40px;
  width: 10em; /* 400px */
  height: 10em;
  border: solid 1px black;
}p {
  font-size: 0.5em; /* 20px */ 
  width: 10em; /* 200px */
  height: 10em;
  border: solid 1px red;
}span {
  font-size: 0.5em;  
  width: 10em;
  height: 10em;
  border: solid 1px blue;
  display: block;
}

ログイン後にコピー

結果は次のとおりです:

統合テスト: Sun 要素のフォントのサイズと幅を教えてください。

答え: 10px、100px と言うでしょうね、笑、それは論理的には正しいのですが、Chrome ブラウザの場合は 12px、120px であるべきだと言わざるを得ません。 Chrome

で設定されている最小フォントサイズは12pxなので、12px未満のフォントサイズはデフォルトで12pxになりますもちろん、この厄介な状況はCSS3で解決できるので、ここでは説明しません。ここで詳細を説明します。

chrome のデフォルトのフォントサイズは 12px、つまり、1em のデフォルトは 12px です。最も外側の親要素が font-size を直接 1.5em に設定すると、要素のフォントサイズは 18px (12*1.5) になります。）。

rem

rem はすべてルート要素に対する相対的な長さです。ルート要素は誰ですか? 要素。通常のアプローチは、html 要素のフォントサイズを設定し、他の要素の長さの単位は rem です。

上記のコード: (HTMLコードは上記の通り、CSSコードの要素の長さの単位を変更するだけです)

html {font-size: 10px;
    }div {font-size: 4rem; /* 40px */width: 30rem;  /* 300px */height: 30rem;border: solid 1px black;
}p {font-size: 2rem; /* 20px */width: 15rem;height: 15rem;border: solid 1px red;
}span {font-size: 1.5rem;width: 10rem;height: 10rem;border: solid 1px blue;display: block;
}

ログイン後にコピー