106 How rem and max-width works

width: 1000pxとmax-width: 1000pxの違い

• width: 1000px >>> 画面幅が小さくなっても大きくなっても要素の幅は1000px
• max-width: 1000px >>> 画面の幅が1000px未満の時は要素の幅も画面幅に応じて小さくなる。画面幅が1000pxを超えた場合は1000pxのまま

remとは

• root em の略 / 最上位階層のM＝１文字分の大きさを表す単位
• 1rem=1font-size(指定しない限り16px)
• html { font-size: 10px} とした場合は、1rem=10pxになる
• ルート要素(html)に対する割合
• 計算しやすいように html { font-size: 10px; } で指定する
• 実際にはデフォルトの16pxに対して10pxは62.5%なので html { font-size: 62.5%; }で記述する

remの特徴と仕組み

rem（root em）は相対的なサイズを表す単位です。remはルート要素のフォントサイズを基準に相対的なサイズを定めます。

html { font-size: 10px; } /* ルート要素にremの基準となるサイズを指定 */
h1 { font-size: 1rem; }   /* 10px 相当 */
h2 { font-size: 2rem; }   /* 20px 相当（２倍） */
h3 { font-size: 0.5rem; } /*  5px 相当（半分） */

このようにremの単位は、ルート要素（html要素）に指定されたフォントサイズに対する倍率として指定します。ルート要素のフォントサイズが10pxの状態で2remが指定された場合には、2倍の20pxが定まる事になります。

remってなんだ

remというのはroot em。つまりはルート要素（html要素）のフォントサイズのこと。

その倍率を指定します。

ルート要素（html要素）のフォントサイズのデフォルトは16pxです。

1.2emならルート要素の1.2倍のフォントサイズ（=19.2px）だし
0.8emならルート要素の0.8倍のフォントサイズ（=12.8px）となるわけです。

相対値を使うメリット

ブラウザの設定でフォントサイズを変更したときに設定が反映されるようになります。

pxなどの絶対値指定だと、ブラウザでフォントサイズを大きくしても
pxで指定したフォントサイズはそのままです。

remを使うとブラウザのフォントサイズが大きくなると、remを使用した要素のフォントサイズも相対的に
大きくなってくれます。