今回の経緯

このWEB発展した社会で、現在さまざまな端末があります。WEB開発をしていると各端末の微妙な画面サイズの違いで表示が崩れることもあります。

特にクライアントとやりとりしていると、こっちでは問題ないのに客先ではおかしくなってるなんてこともザラです。けっこうこのやりとりってお客さんの状況なども聞かないと気づかないことなのでコミュニケーションコストがかかります。あと『この人ショボいな』なんて思われるかもしれません。

現在私が使用している方法で、万能とはいかないけど画面サイズの微妙な違いなら対応できるようなサイズの計算方法をご紹介したいと思います。

実例（PC）

▼大きめのノートPCサイズ（1344px）

▼デスクトップで見ると（1920px）

▼小さめのPCで見ると（1280px）

PCの場合のイメージ的にはこんな感じです。この場合開発者は1344pxの少し大きめのノートPCで開発しているのでそのサイズではカンプ通りに作成したとします。ただ画面サイズが少し変わるだけで思惑とはだいぶかけ離れますね。

ディレクションをやることもあるのですが結構コーダーから上がってきたものでもよく見かけます。で、だいたいこれを指摘すると『私の方では問題ないですよ？』みたいな回答が返ってきます。そういうことではないんですよね・・・

▼標準サイズのスマホ（375px）

▼小さめのスマホ（320px）

これもよくあります。数十pxの違いで改行位置が変わってしまいます。流石にこれは気になりますよね？

前置きが長くなりましたが、サイズをpxで固定しまうのではなくvwで可変にすれば大体は解決できます。ただすこし慣れが必要です。

100vw / コンテナサイズ * 基準値

100vwは画面全体のサイズです。

コンテナサイズはカンプで指示があった幅です。例えば1400pxでカンプが作られていて1200pxの幅で要素が収まっていたら、基本的には1400と1200がこの式に当てはまります。

基準値は1remの値をなんpxにしたいかです。基本は10pxだと思います。

▼カンプ

カンプサイズ＝1400px
コンテナサイズ＝1200px

▼ファーストビューは1400pxフル
画面サイズが1400pxの時に1remが10pxにしたいです。

font-size: calc(100vw / 1400 * 10);

▼各セクションは1200pxがコンテナサイズ
画面サイズが1200pxの時に1remが10pxにしたいです。

font-size: calc(100vw / 1200 * 10);

こうすることによって、カンプで指示されたサイズを基準に比率を保ったまま可変になることがわかりますでしょうか？

100vwは画面幅を指します。では画面幅が1400pxだとして先ほどの式に当てはめるとどうでしょうか？

100vw / 1400 * 10
↓
1400px / 1400 * 10

となり答えは10pxとなります。では画面が大きくなったらどうでしょうか？

1920px / 1400 * 10
答えは13.7142857pxとなります。逆に小さいなると、

1280px / 1400 * 10
答えは9.14285714pxとなります。

まとめるとサイズをpxで固定にするのではなくvwを用いることである程度の画面サイズごとの表示の差異をなくせますよということでした。この方法の使い方自体は気になると思いますが、また別の機会にしたいと思います。気になる方はDM、コメントください。

▼PCシェア率

▼SPシェア率（年々大きくなってます・・・）