#3 REMsとEMs

remまたはemのような相対単位の使用は、ウェブページレイアウト(typography)のベストプラクティスの1つである.どちらを使うべきかは様々な論争が続いている.
次の記事では、この2つの相対単位rem,em、およびモジュールコンポーネントで使用する方法について詳しく説明します.
一.EMとは
1.font-sizeの値を設定する
セレクタのfont-size属性が20 pxの場合、1em = 20px

h1 { font-size: 20px } //  1em = 20px
p {font-size: 16px} //   1em = 16px

Em単位はfont-sizesを宣言するのに使えますが、次のような状況はどういう意味ですか?

h1 { font-size: 2em } // h1        ？

h 1フォントサイズを計算するには、h 1の親要素を表示する必要があります.親要素がhtml(デフォルトのフォントサイズは16 px)であると仮定すると、h 1フォントサイズは:16 px * 2 = 32px、すなわち:

html { font-size: 16px }
h1 { font-size: 2em } // 32px

これは可能ですが、これは良い考えではありません.これはユーザーブラウザの設定を書き換えるので、percentage値を選択することができます.

html {  font-size: 100% } //      16px

2.emを使用してmargin,padding値を設定するfont-sizeの値を設定できるほか、emはpaddingとmarginの値を設定できるのも多くの人が迷っているところです.
次のコードを見てください.h1とpのmargin-bottomの値はそれぞれいくらですか.(htmlのfont-sizeを100%に設定するとします):

h1
  font-size: 2em     // 1em = 16px,  2em = 32px
  margin-botton: 1em // 1em = 32px

p
  font-size: 1em     // 1em = 16px
  margin-bottom: 1em // 1em = 16px

驚くべきことに、2つの要素のmargin-bottom値が異なるのではないでしょうか.
この現象は、1emが自身のfont-sizeの値に等しいため、h 1の現在のフォントサイズは32 pxであるため、1em = 32px、以下のp要素1em = 16pxである.
異なるコード環境では1emの値もそれぞれ異なり,emを使用し始めた人は困惑しているが,これがemである.
二.REMとは何かremはROOT EMを表し、emの複雑な計算から人々を解放するために現れた.
これは、ルートフォントサイズに相当するページ設計単位であり、1remはhtmlのfont-sizeの1remのサイズに永遠に等しいことを意味します.
次のコードを見てください.

h1
  font-size: 2rem
  margin-bottom: 1rem // 1rem = 16px

p
  font-size: 1rem
  margin-bottom: 1rem // 1rem = 16px

html font-sizeの値を変更しない限り、remは永遠に16 pxに等しく、どこで設定しても構いません.
これはemで、理解しやすく、環境が独立していて、rem | emとは何かを知ったら、簡単に理解できます.
三.REMsを使うかEMsを使うか
この話題は論争的だ.
一部の人はremの使用を完全に避け、コンポーネントのモジュール性を低下させると考えている.簡潔性のためremをほとんど使用している人もいます.
Emはモジュール化コンポーネントを助けることができるが、コードに複雑さをもたらす.remは計算を簡単にしますが、モジュール化コンポーネントには友好的ではありません.従って、font-sizeはそれぞれメリットとデメリットがあるので、具体的な使用状況に応じて使用する.
基本的な2つの原則:

プロパティをemに従ってスケーリングする場合は、rem

を使用します.

残りの使用.header

1.具体例:Header要素に対してREMsのみ使用
次のjadeコード

h2.header this is a header

remのみを使用:

.header
  font-size: 1rem
  padding: 0.5rem 0.75rem
  background: pink

少し大きいヘッダー要素を作成すると、フォントサイズとpadding値は上のh 2の2倍になります.

a.header.large-header this is big header

a
  display: block

.large-header
  font-size: 2rem

このように設定するだけで、padding値はh 2の2倍になっていないことがわかりますので、paddingを書き直します.

.large-header
  font-size: 2rem
  padding: 1rem 1.5rem

これで完了しますが、コードの重複が発生することを発見しました.もしこのようなサイズの違いが必要な要素があれば、重複するコードがより多くなることを発見しました.emのサイズに従ってスケールするpadding値を.header--largeに設定することができます.これにより、繰り返し宣言する必要はありません.

.header
  font-size: 1rem
  padding: 0.5em 0.75em
  background: pink

.large-header
  font-size: 2em
  //    font-size   ，padding    

2.ヘッダー要素にEMsのみ使用
例:

.header.header--large A header element
p lorem
p lorem
.header A header element smaller
p lorem

emのみ使用:

.header
  font-size: 1em
  padding: 0.5em 0.75em
  background: pink
  
.header--large
  font-size: 2em

p
  margin-left: 0.75em
  margin-right: 0.75em

font-sizeの文字が左のpadding値からもスケーリングされているため、2つのタイトルが左からずれているため、以下の設定が可能であることがわかります.

.header--large
  font-size: 2em
  padding-left: 0.375em 
  //   font-size  2 ，    1/2    
  padding-right: 0.375em

これによりコード冗長性も生じることがわかり、padding-left,padding-rightの値をremに設定することで自動スケールが行われなくなります

.header
  font-size: 1em
  padding: 0.5em 0.75rem //      0.75em   0.75rem
  background: pink
  
.header--large
  font-size: 2em

まとめ
使用する単位は使用状況によって異なり、一般的に属性がemに基づいてスケーリングされる場合はrem、残りの場合はemを使用する.また、メディアクエリーを使用する場合は、safariブラウザでバグが発生するため、remを使用することが望ましい.
原文のリンク:

REM vs EM – The Great Debate

拡張読書PX,EMor REM Media Queries?

フォント相対サイズ表示ツールmodular scale

codepen相対サイズおよびflexboxレイアウト