エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
rem と vw で画面幅に対して常に可変な要素サイズを指定するCSSの書き方|noteエンジニアチームの技術記事
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
rem と vw で画面幅に対して常に可変な要素サイズを指定するCSSの書き方|noteエンジニアチームの技術記事
rem と vw で fluid responsiverem と vw は相対的な単位で、rem はルート要素 html のフォントサイズに... 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