レスポンシブデザインの考え方（コーディング）

クライアントの予算は正直ピンきりなので、予算枠に応じてWEB制作するときのブレイクポイントの基準をメモしておきます。

ブレイクポイント3箇所

区間は以下の通り
・sm：360px ~ 767px
・md：768px ~ 1023px
・lg：1024px ~ 1366px
・xl：1367px ~ 2880px
※360pxより小さい端末についてはviewportで対応（参考記事：TAKさんの俺流レスポンシブコーディング）
※ウルトラワイドまで対応しているとキリがないので最大幅はiMacの2880pxまで。
※2880pxについては自分のやり方なので、別に1920pxまでにしても良い。

記述方法

style.css

/* スマホのCSS記述 */
@media and (min-width: 768px){ /* CSS記述 */ }
@media and (min-width: 1024px){ /* CSS記述 */ }
@media and (min-width: 1367px){ /* CSS記述 */ }

ブレイクポイント1箇所

区間は以下の通り
・sm：360px ~ 767px
・lg：1024px ~ 1366px
※768px ~ 1023pxまではコンテンツ幅767px固定のリキッドデザイン。
※1367px以降はコンテンツ幅1366pxのリキッドデザイン。

記述方法

style.css

.container{
  /* スマホのCSS記述 */
  max-width:767px;
  width: 100%;
  margin: 0 auto;
}
@media and (min-width: 1024px){
  .container{
    max-width:1366px;
  }
}

それでもブレイクポイントが足りない場合

正直TAKさんも記事に書かれていますが、1024px付近は曲者なのは間違いないです。
規定のブレイクポイントだけでは対応できないときは、ディレクターやデザイナーと相談しながら個別にメディアクエリを追加できないか相談しましょう。
ちなみに自分は「よしなに」のパターンが多いので、半分責了でメディアクエリを追加してます。

本当は都度クライアントなどに確認が取れる環境が望ましいですが、会社によってはデザインを再現できるならOKというところもあるとは思うので、前もって上の者に確認しておきましょう。