# リキッド考察
レスポンシブには大きく分けてリキッドと固定幅がある。
今回扱うのはリキッドのみ
参考
https://hackmd.io/pkE4deq8TeOeDiui0EF6TA?view

# 各社の実装
リキッドの割合が大きい。下記に出す例はすべてリキッド

## スタジオディテイルズ
https://mobility-contest.jp/
https://elephantstone.net/
https://www.rinnai-dishwasher-weblimited.jp/stainless-door/

大きめのデザインをvwで実装。
特殊なもの以外はだいたいこの実装な気がする

おそらく下記の横幅でデザインしてる
PC: 1600px
SP: 828px
他社が作ったサイトも含んでいるが、実装は同じなのでおそらくガイドラインがある

## Garden Eight
https://eco-pork.com/
https://shapefarm.net/ja/about/

固定する値のルールが見えにくい
基本的にはpxだが、以下のものはvw
* コンテンツ幅
* 画像
* でかい見出し
* 大きめの余白
見出し、セクション間
要素で分類するのではなく、でかい要素はvwにしてる気がする

# リキッドにおける単位比較
pxとvwに絞ってます
※親要素の幅が使える％もありますが省いてます

## px
固定。pxだけだと拡大縮小できないので、どの値をpxするか決める
### メリット
本文や図の見やすさを担保できる？

### デメリット
拡大したとき、バランスがおかしくなる。
https://eco-pork.com/ 本文の余白のバランスがおかしく見える

縮小したとき、余白の調整・カラム落ちなどを考慮する必要がある

## vw
等倍で拡大縮小する

### メリット
実装が楽

### デメリット
極端に拡大縮小したとき見にくい
1280pxのデザインをvwで実装すると768pxのとき0.6倍、1920pxのとき1.5倍になる

## vwとpxを計算式で組み合わせる
・倍率を指定して拡大縮小できる

・最大値・最小値を決められる
特定の幅になったら一定の大きさに固定したい

### メリット
pxとvwのメリットを組み合わせられる

### デメリット
pxとvwのデメリットを考慮して実装する必要がある