メディアクエリは数年でアップデートを繰り返し、スマホのバージョンアップに合わせて変化しています。
私は便利といわれるＳＣＳＳを使用しないのでただでさえＣＳＳは長くなりますし、できるだけ短く済ませたい。
現状のメディアクエリはこんな感じ。基本ＰＣファーストで作成するので、max-widthで指定。
①cotainerでコンテンツを囲み、max-wifthを指定しているので、そのcontainerが可変するタイミングから開始。
@media screen and (min-width: 1281px) and (max-width: 1600px) {}
②Mac book Airの画角に合わせてます。最近増えたクライアントさまに教えてもらいました。
@media screen and (max-width: 1280px) {}
③タブレットについて共通、縦、横で作成します。そうしないとvhが使い物にならない。
@media screen and (min-width: 631px) and (max-width: 1024px) {}
④orientation: landscapeで横向き専用のＣＳＳ
@media screen and (min-width: 631px) and (max-width: 1366px) and (orientation: landscape) {}
⑤orientation: landscapeで縦向き専用のＣＳＳ
@media screen and (min-width: 631px) and (max-width: 1024px) and (orientation: portrait) {}
⑥スマホは直近で630px幅のスマホと出会ったのでこの数字にしています。
@media screen and (max-width: 630px) {}
本当はもっとremを使ったレスポンシブのメディアクエリを作成したいが、現状clamp関数で精いっぱい。勉強せねば、、。