レスポンシブフォントサイズ:画面サイズに応じてフォントサイズを縮尺する

レスポンシブフォントサイズ:画面サイズに応じてフォントサイズを縮尺する



画面サイズに応じてフォントサイズを可変したい(レスポンシブに対応したい)場合のメモです。

参考サイトはこちら。

【CSSテクニック】ブロック要素の比率を維持しながら可変させる方法 | 大阪南森町のホームページ制作集団 - 株式会社リースエンタープライズ
参考
【CSSテクニック】ブロック要素の比率を維持しながら可変させる方法 | 大阪南森町のホームページ制作集団 - 株式会社リースエンタープライズ

高さ不明のブロック要素の比率を維持させる方法をご紹介します。応用やブラウザ対策まで。レスポンシブデザインのコーディングにそのまま使えるCSSテクニックです。

【CSSテクニック】ブロック要素の比率を維持しながら可変させる方法 | 大阪南森町のホームページ制作集団 - 株式会社リースエンタープライズ 大阪南森町のホームページ制作集団 - 株式会社リースエンタープライズ

つまり、特定の画面サイズで表示したいフォントサイズを基準にvw単位で指定するという方法です。

画面サイズが1280ピクセルで20pxで表示してこのままの縮尺で表示したい場合は

20px / 1280px * 100 = 1.5625vw

とすれば良いと。

でもこれを毎回手計算してstyle.cssに記述するのもちょっと面倒ですので、SCSSの関数を使って自動生成するようにしてみます。

@function responsiveFont($px, $vw){
	@return ($px / $vw) * 100 + vw;
}

これでそれぞれの引数にフォントサイズと画面サイズを指定して

font-size: responsiveFont(20, 1280);

コンパイルすれば

.font{
  font-size: 1.5625vw;
}

となります。
基準となるフォントサイズや画面サイズを変数にしてやればもっと楽かもしれません。

$base: 20px;
$desktop_vw: 1280px;

.font{
  font-size: responsiveFont($base, $desktop_vw);
}

但し、このままだと画面サイズが1920px等になると、フォントサイズが大きくなるので、基本的にはメディアクエリの中に記述するのが良いでしょう。

今日はここまで
レスポンシブフォントサイズ:画面サイズに応じてフォントサイズを縮尺する

レスポンシブフォントサイズ:画面サイズに応じてフォントサイズを縮尺する


開発

画面サイズに応じてフォントサイズを可変したい(レスポンシブに対応したい)場合のメモです。 参考サイトはこちら。 つまり、特定の画面サイズで表示したいフォントサイズを基準にvw単位で指定するという方法です。 画面サイズが1…


関連する記事



こちらはいかが?


Chromeのsrcsetで誤解していた。
Chromeのsrcsetで誤解していた。

ウィンドウサイズに応じて画像を切り替えるsrcset。 コードはこんな感じ。 <img sizes="100vw" srcset=" https://dummyimage.com/24…

Bootstrapの変数を自分のSCSS(SASS)で使う方法
Bootstrapの変数を自分のSCSS(SASS)で使う方法

bootstrapのソースファイルを一括ダウンロードすると、その中には複数のscssファイルが格納されています。 通常、bootstrapの色や幅などの数値を変更するにはその中にある _variables.scss の中…

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*(必須)

*(必須・表示されません)