メディアクエリで書いていた文字サイズ指定をビューポート幅で指定する

ビューポートとは

ビューポートとは、webブラウザ等でコンテンツが表示される「表示領域」のことを指す。
PCの表示サイズは最近はフルHDの1920×1080が多く、スマホであればiphone端末ごとのサイズなどになる（最大画面で表示している時の話）。端末によってまちまち。

メディアクエリとは

ユーザーがアクセスしている端末を判断して、その特性からスタイルを指定できる機能
書き方の例：

@media screen and (min-width : 500px) {
    /* 画面サイズが 500px 以上の場合以下を読み込む */
    body { background-color: #fff; }
};

※ max-width や min-width を用いて、目的の端末（媒体）のサイズを指定する必要がある。これが面倒くさかった。種類いっぱいあるし。

これに対して、フォントサイズを「px」や、「em」「rem」「%」等で指定していた。

ビューポートのCSSでの指定

まず、ビューポートを使うためのmetaタグ指定が必要

/* contentにはビューポートのプロパティとその値を記載する */
<meta name="viewport" content="...">

プロパティとその値

プロパティ値
width=表示領域の幅数値ピクセル数 （200～10000 の範囲、初期値は 980）
device-width端末画面の幅に合わせる
height=表示領域の高さ数値ピクセル数 （233～10000 の範囲、初期値は自動）
device-height端末画面の高さに合わせる
initial-scale=初期のズーム倍率数値倍率 （minimum-scale～maximum-scale の範囲）
minimum-scale=最小倍率数値倍率 （0～10 の範囲、初期値は 0.25）
maximum-scale=最大倍率数値倍率 （0～10 の範囲、初期値は 1.6）
user-scalable=ズームの操作yes許可する （初期値）
no許可しない

ビューポートでフォントサイズを指定する

指定の単位。

  • vw = viewport width
    →ビューポートの幅に対する割合
  • vh = viewport height
    →ビューポートの高さに対する割合

画面の横幅MAX = 100vw なので、

body {
    font-size: 16px; 
    width: 1024px;
}
p { font-size: 10pw; }

上記の条件で、画面幅が400pxの場合、 <p> タグのフォントサイズは

400px * 10% = 40 px

となる。
んで、これを逆算する。画面幅が400pxの時に14pxの比率で表示したい場合

14 / 400 * 100 = 3.5

となるので、 p{ font-size: 3.5vw; } を指定するとよい。

〜とりあえず今回のまとめはここまで〜