レスポンシブWEBデザインにおけるbreakpointの設定について

個人的制作メモ。これが正しいというものではありません。

breakpointの決めかた

水平スクロールはユーザビリティを損なうため適宜コンテンツを制御する必要がある。

レスポンシブデザインのbreakpointはコンテンツ毎またはデバイス毎に設定する。googleデベロッパーサイト的にはコンテンツベース推奨。以下、googleの指針に沿ってメモ。

デバイスベースにすると将来的にメジャーなデバイスサイズが変わった場合にメンテナンスが大変になる。コンテンツベースで画面サイズに応じてコンテナのサイズやレイアウトを切り替えたい。

基本的に小さめデザインから制作していくと、必要に応じてbreakpointを追加できる。たとえば600pxを超えてくると余白が目立つ場合、以下のようにbreakpoint設定。


@media (max-width: 600px) {
/*600px以下のスタイル*/
}

@media (min-width: 601px) {
/*601px以上のスタイル*/
}

その他、適宜小さいサイズで文字を小さくしたり、画像サイズの変更したり、最大画面でのwidthを決めたり。

個人的メモ

基本max600(スマホ想定)でデザイン、max900px、min1201pxで組む

画像のcss初期設定


img {
  max-width: 100%;
  display: block;
}

画像が横幅を超えないために設定する。

同時にimgタグにwidthとheight値を設定すること。