[CSS]レスポンシブのサイトでmin-widthを使う時の決め方

Question

CSSでレスポンシブのサイトを作るとき、

@media(min-width:600px){
  #hoge{
     width:300px;
  }
}

とかやりますが、
みなさんは、このmin-widthの値をどのように決めていらっしゃるのでしょうか？

最近のスマホは普通にwidthが1000px以上のものもあり、PC←→スマホの判定が難しい気がするのですが、何か基準や、min-width以外の方法などをご教授いただけると助かります。

Comments

[退会済みユーザー]

最近のスマホだとワイド640xレート3で1920とかいう計算だったような

[yhg]

<meta name="viewport" content="width=device-width,initial-scale=1"> 書いておけば物理的なデバイスサイズで測ってくれると思う

[yoshinavi]

「デバイスピクセル」「CSSピクセル」の違いは理解していますでしょうか？

[退会済みユーザー]

回答は出揃ってると思うが、いかがだろう。

Answer 1

メディアクエリに使用するビューポートの幅(ブレイクポイント)を決定する方法として、 2 つの方法があると思います。

• 普及しているデバイスの画面幅を基準としたブレイクポイントを設定する
• デザインが大きく変化するとき、もしくは、デザインが崩れ、要素があるべき場所に配置されないときにのみ、ブレイクポイントを設定する

前者は、デバイスごとに最適なスタイルを適用することが出来ます。ただし、ブレイクポイント(対応するデバイス)が増えるほど、スタイルのメンテナンスが困難になってゆきます。
後者の場合は、コンテンツに基づいた必要最小限のブレイクポイントだけが設定されているため、結果として、どのような画面幅でもデザインが崩れることがなく、ブレイクポイントの管理も容易になります。ただし、コンテンツごとに最適なブレイクポイントを模索する必要があるので、少し手間がかかります。

---

私が暇つぶしで何かをする場合は、手間がかかるのが面倒くさいので、Material Design や、有名な CSS フレームワークで使われているブレイクポイントを参考に、 CSS 変数として定義して使うことはあります。ただし、ここで定義した数値は、デバイスの画面幅を意識したものではなく、デザインが大きく変化する可能性が高いポイントとして、便宜的に設定しているだけなので、場合によっては変更することがあります。