「サイトのフォントの大きさをデバイスや画面幅に応じて変えたい！」という方へ、比較的簡単な「リキッドデザイン」の実装例を示します。困っている方の参考になれば幸いです
目次(クリックでジャンプ)
準備
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 (min–width:480px) {
body{font-size: ;}
}//480px幅より大きい画面でのサイズ
@media screen and (min–width:768px) {
body{font-size: ;}
}//768px幅より大きい画面でのサイズ
@media screen and (min–width: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時間位画面とにらめっこしたので、いや～疲れた！