相対単位
px は動かない単位
ここまでの CSS は、長さのほとんどを px で書いてきました。px は画面の点の数そのものなので、どんな端末でも同じ大きさで固まります。画面に合わせて伸び縮みしてほしい場所には向きません。そこで相対単位を使います。何かを基準にした割合で長さを決める単位のことです。
三つの相対単位
rem は、ページの基準になる文字サイズを 1 とする単位です。既定では 1rem が 16px なので、24px は 1.5rem になります。利用者がブラウザの文字サイズ設定を大きくすると、rem で書いた文字も余白もいっしょに大きくなります。文字と余白は rem で書くのが基本です。
% は親要素に対する割合です。width: 100% なら親と同じ幅まで伸びます。vw は画面幅を 100 とする単位で、40vw は画面幅の 40 パーセントぶんです。親ではなく画面そのものに連動させたいときに使います。
書くこと
文字サイズと余白の px を rem に置き換えます。.site-header などの幅は width: 100% と max-width: 45rem の組み合わせにして、せまい画面では画面いっぱい、広い画面では 45rem で止まるようにします。
プロフィール写真は width: 40vw と max-width: 10rem にします。画面幅に合わせて縮みながら、大きくなりすぎることもない形です。前回まで書いていた max-width: 100% から置き換えてください。
課題
- 文字サイズと余白の px を rem に置き換える
.site-headerと.site-mainと.site-footerをwidth: 100%とmax-width: 45remにする.profile-photoをwidth: 40vwとmax-width: 10remとheight: autoにする.profile-textのflex-basisを16remにする