[CSS]見出しや本文のfont-sizeとline-heightの単位にremを使用して、レスポンシブ対応にするスタイルシート

見出しのhn要素、本文のp要素のfont-sizeとline-heightをデスクトップとスマホに適したサイズに自動的に算出するためのSCSSファイルを紹介します。

サイズ指定の単位には「rem」を使用しており、ルート要素に基づいて定義します。

デモのキャプチャ

SCSScale -GitHub

サイズのベースとなっているのは、下記の記事からです。

サイトのキャプチャ

参考: A More Modern Scale for Web Typography

SCSSファイルはそのまま使用しても、カスタマイズしてもOKです。「rem」のフォールバックには、「px」が使用されています。

CSSにすると、下記のように利用できます。

デモのキャプチャ

デモページ: デスクトップ時

デモのキャプチャ

デモページ: スマホ時

sponsors

top of page

©2024 coliss