前置き
皆さんこんにちは！
クライアントの予算は正直ピンきりなので、予算枠に応じてWEB制作するときのブレイクポイントの基準をメモしておきます。
あくまでもこれは予算の兼ね合いでコーディングにかかる人件費を削らないといけない場合の対処法の１つです。
賛否両論ありそうですが、地方の中小企業ではHPという無形サービスに対してお金を出し渋る傾向があるので、その中でどうにかやりくりするための処世術のようなものです。
「自分ならきっちり予算取ってこれるわ！」
って自身のある方は是非とも頑張って予算取って来てください。
それだけでもあなたの株は上がります（笑）
ブレイクポイント3箇所
区間は以下の通り
- sm：360px ~ 767px
- md：768px ~ 1023px
- lg：1024px ~ 1366px
- xl：1367px ~ 2880px
※360pxより小さい端末についてはviewportで対応（参考記事：TAKさんの俺流レスポンシブコーディング）
※ウルトラワイドまで対応しているとキリがないので最大幅はiMacの2880pxまで。
※2880pxについては自分のやり方なので、別に1920pxまでにしても良いし、僕自身案件によって1920pxと使い分けている。
/* スマホのCSS記述 */
@media and (min-width: 768px){ /* CSS記述 */ }
@media and (min-width: 1024px){ /* CSS記述 */ }
@media and (min-width: 1367px){ /* CSS記述 */ }
なお、上限を超えた画面サイズではbody直下のタグに以下の記述をしておけば、最大幅以上には広がらず、画面の左右中央に配置される。
もちろん、その場合は横幅いっぱいのベタや写真も最大幅以上には大きくならないので注意。
<body>
<div class="siteWrapper">
<header></header>
<main></main>
<footer></footer>
</div>
</body>.siteWrapper{
max-width: 1920px;
width: 100%;
margin: 0 auto;
}ブレイクポイント1箇所
区間は以下の通り
- sm：360px ~ 767px
- lg：1024px ~ 1366px
※768px ~ 1023pxまではコンテンツ幅767px固定のリキッドデザイン。
※1367px以降はコンテンツ幅1366pxのリキッドデザイン。
.container{
/* スマホのCSS記述 */
max-width:767px;
width: 100%;
margin: 0 auto;
}
@media and (min-width: 1024px){
.container{
max-width:1366px;
}
}それでもブレイクポイントが足りない場合
正直TAKさんも記事に書かれていますが、1024px付近は曲者なのは間違いないです。
規定のブレイクポイントだけでは対応できないときは、ディレクターやデザイナーと相談しながら個別にメディアクエリを追加できないか相談しましょう。
ちなみに自分は「よしなに」のパターンが多いので、半分責了でメディアクエリを追加してます。
本当は都度クライアントなどに確認が取れる環境が望ましいですが、会社によってはデザインを再現できるならOKというところもあるとは思うので、前もって上の者に確認しておきましょう。
コメント