あじちゃんのブログ。備忘録。

〜SEもOLなんですかね?

レスポンシブデザイン - vw, vh

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

ビューポートとは

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

メディアクエリとは

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

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

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

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

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

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

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

プロパティとその値 *1

プロパティ
width= 表示領域の幅 数値 ピクセル数 (20010000 の範囲、初期値は 980
device-width 端末画面の幅に合わせる
height= 表示領域の高さ 数値 ピクセル数 (23310000 の範囲、初期値は自動
device-height 端末画面の高さに合わせる
initial-scale= 初期のズーム倍率 数値 倍率 (minimum-scalemaximum-scale の範囲)
minimum-scale= 最小倍率 数値 倍率 (010 の範囲、初期値は 0.25
maximum-scale= 最大倍率 数値 倍率 (010 の範囲、初期値は 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; } を指定するとよい。

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