微妙な画面サイズの違いに対応するためのレスポンシブの考え方

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

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

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


## 実例（PC）

▼大きめのノートPCサイズ（1344px）
![スクリーンショット 2022-05-04 10.47.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/85aed43f-cf7e-45cf-f4e4-6ae1300b8152.png)

▼デスクトップで見ると（1920px）
![スクリーンショット 2022-05-04 10.47.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/763534b3-1ada-7379-6d6c-f52061facb42.png)

▼小さめのPCで見ると（1280px）
![スクリーンショット 2022-05-04 10.48.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/1aae5ec3-6436-416c-2026-a70f3d037933.png)

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

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

## 実例（SP）

▼標準サイズのスマホ（375px）
<img width="375" alt="(iPhone 6_7_8).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/1962b594-aff7-c446-8de0-711be290fbf4.png">

▼小さめのスマホ（320px）
<img width="320" alt="(iPhone 5_SE).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/c2f64054-ff77-621e-381a-12ea478e5934.png">

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

## VWをベースに変えるとある程度は解消できる
前置きが長くなりましたが、サイズを`px`で固定しまうのではなく`vw`で可変にすれば大体は解決できます。ただすこし慣れが必要です。

### 基本の式
**`100vw` / `コンテナサイズ` * `基準値`**

<font color="red">**100vw**</font>は画面全体のサイズです。

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

<font color="red">**基準値**</font>は`1rem`の値を`なんpx`にしたいかです。基本は10pxだと思います。

### 基本の式の例
▼カンプ
<img width="320" alt="2022-05-04 11.54.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/773d2efe-6b75-97c1-23e1-0d37aada1a20.png">
カンプサイズ＝1400px
コンテナサイズ＝1200px

▼ファーストビューは1400pxフル
画面サイズが<font color="red">**1400pxの時に1remが10px**</font>にしたいです。
```scss
font-size: calc(100vw / 1400 * 10);
```

▼各セクションは1200pxがコンテナサイズ
画面サイズが<font color="red">**1200pxの時に1remが10px**</font>にしたいです。
```scss
font-size: calc(100vw / 1200 * 10);
```
こうすることによって、カンプで指示されたサイズを基準に比率を保ったまま可変になることがわかりますでしょうか？ 

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

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

となり答えは<font color="red">**10px**</font>となります。では画面が大きくなったらどうでしょうか？

**`1920px` / `1400` * `10`**
答えは<font color="red">**13.7142857px**</font>となります。逆に小さいなると、

**`1280px` / `1400` * `10`**
答えは<font color="red">**9.14285714px**</font>となります。

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

## 補足
基準となる画面サイズは以下などを参考にしてみるといいです。
https://gs.statcounter.com/

▼PCシェア率
![スクリーンショット 2022-05-04 10.35.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/fac892b5-a2e6-8abd-f2e4-924f26149a85.png)

▼SPシェア率（年々大きくなってます・・・）
![スクリーンショット 2022-05-04 12.30.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/6fe976d0-da16-76d4-ff34-cc8b9cc82d98.png)