簡単・お手軽にフォントサイズをレスポンシブに

「サイトのフォントの大きさをデバイスや画面幅に応じて変えたい!」という方へ、比較的簡単な「リキッドデザイン」の実装例を示します。困っている方の参考になれば幸いです

準備

CSSの記述場所

本文中に

html本文の中に<style></style>で囲む

別ファイルに

別ファイルにしてリンクする。

当方の環境では「記法が正しいのにリンクが上手く行かない」場合、二度書きすると良いみたい(ホントに)

基本サイズの指定

ルートで指定→remの基準になる
:root{font-size:ここに記述;}

bodyで指定→ページ全体の基準になる
body{font-size:ここに記述;}

 

文字化け対策

文字コードを指定します

<meta charset=”utf-8″>

しかし、ブラウザによっては文字化けするので、対策のコードを下に加えます

<meta http-equiv=”content-type” charset=”utf-8″>

基本技法(メディアクエリ)

メディアクエリを書いて、閲覧ブラウザの画面サイズ(単位はピクセル)で記述を変える

モバイルファースト

(画面サイズが小さい方から記述)

body{font-size: ;}//デフォルトの大きさ

@media screen and (minwidth:480px) {
body{font-size: ;}
}//480px幅より大きい画面でのサイズ

@media screen and (minwidth:768px) {
body{font-size: ;}
}//768px幅より大きい画面でのサイズ

@media screen and (minwidth:1024px) {
body{font-size: ;}
}//1024px幅より大きい画面でのサイズ

デスクトップファースト

(画面サイズが大きい方から記述)

 

まっさらなhtmlを書いてchromeのデベロッパーツールでテストしてみたのだが、レスポンシブ表示が上手く行かない!!イライライライライライライライラ

chromeのデベロッパーツールがうまく作動しない!

記事執筆当時、デベロッパーツールのレスポンシブツールが上手く作動しませんでした。

幅に応じたCSSが適用されません。2時間以上ググって色々試してもダメ!

ふと…タブを独立させて幅をドラッグしてみると、うまく出来ました。ふざけんなよ…

リキッドデザイン

ブレイクポイントで固定せずに、「VW」「VMax」などの画面幅で指定する

考え方

VWを変数にして1次関数でサイズをしても、変域を決めないと破綻しそうなので、ブレークポイント2点を変域にします。

ブレークポイント(画面幅に比例する範囲)を480と1024にして、それぞれのフォントサイズを13.2と20.5に決まりました。

二点(480,13.2)と(1024,20.5)を結ぶ1次関数を求めると「1.342VW+6.7」になります。これをフォントサイズに指定しようと色々書いてみたのですが、ダメでした。

コチラの御サイトをが同じことを緻密になさっているのを発見!参考にさせていただき、実装完了!

設定例

body{background:#dcf;color:#000a;font-size:calc(480px/38);}
~480px以下の画面幅では480px÷38文字分の13.2pxに固定

@media screen and (min-width: 481px){
body{background:#ece;font-size:calc(1.342vw + 6.7px)}}
~481pxから1024pxまでの画面幅では13.2pxから20.5pxまで大きくなっていく

@media screen and (min-width: 1024px){
body{background:#fcd;font-size:calc(1024px / 50);}}
~1024以上の画面幅では20.5pxに固定

外部スタイルシートの読み込みが上手くいかなかった」のと合わせて8時間位画面とにらめっこしたので、いや~疲れた!

タイトルとURLをコピーしました