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=1文字分の大きさを表す単位
- 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 相当(2倍) */
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を使用した要素のフォントサイズも相対的に
大きくなってくれます。