rem と vw で fluid responsiverem と vw は相対的な単位で、rem はルート要素 html のフォントサイズに連動し、vw はビューポートの幅に連動します。 基準となる html に ビューポート基準の vw 単位でフォントサイズを指定すると、テキストサイズや要素サイズや余白や位置などに rem 単位を使った要素がビューポート幅と連動するようになります。フォントサイズに関連したrem 単位を、別なサイズ表現のプロパティに与えられるCSSのおもしろいところを利用します。 html { // viewport 375px のとき font-size 16px font-size: calc(100vw * 16 / 375); } .ex-object { margin: 1rem; font-size: 1rem; transform: translate(1r
![rem と vw で画面幅に対して常に可変な要素サイズを指定するCSSの書き方|noteエンジニアチームの技術記事](https://cdn-ak-scissors.b.st-hatena.com/image/square/4d0d7c4b8503abdee8047058a66cc6147b0cb904/height=288;version=1;width=512/https%3A%2F%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F66909588%2Frectangle_large_type_2_6544e03b399da5a877f2c4ab2b8504ec.png%3Ffit%3Dbounds%26quality%3D85%26width%3D1280)