media screen ブレークポイント

Question

１．サイトによって異なるとは思いますが、
みなさんのサイトではブレークポイントの値は、みなさんいくつに設定しておりますか。

２．max-widthで1000と500を設定した場合、
順番としては以下のように大きいほうから記述していく形でしょうか。
@media screen and (max-width: 1000px) {
}
@media screen and (max-width: 500px) {
}

Answer 1

1.ブレイクポイント幅

受託でデザイナーさんからPSDカンプをもらい、それに合わせて作ることが多いので
スマホカンプ幅640pxにスマホ用／PC用のレイアウトを切替えるメジャーブレイクポイントを設定しています。それ以外の箇所はパーツ単位で必要なら切替ポイントを追加しますが、その際には480px, 768px, 960pxあたりを必要に応じて適宜選択しています。
なのでシンプルなデザインなら、
@media screen and (min-width: 640px){...} のみになります。

2.max-widthで1000と500を設定した場合

max-widthで作るなら、大きい方のブレイクポイントから順に記述する形で正解です。
min-widthで作るなら、逆に小さい方のブレイクポイントから順に記述してください。
世間的に推奨されているのはmin-widthで作るモバイルファースト方式の方になります。
個人的にはmax-widthで作るのは「IE8を考慮する場合」「既存PCサイトをレスポンシブ化する場合」のどちらかに該当する時のみです。

Comments

[退会済みユーザー]

回答いただきありがとうございました。

可能であればこちらもご回答頂けないでしょうか。
以下のような書き方はあまりよろしくないでしょうか
/* 0〜640px */
@media screen and (min-width: 0px) and (max-width: 640px) { }
/* 641px以上 */
@media screen and (min-width: 641px){　}

[aKusano]

ベースとなる画面サイズのスタイル指定には、リセットCSSや幅を設定しない状態での各コンポーネントのベーススタイルなど、全画面サイズで共通のスタイルになるものが結構含まれているはずなので、そういうものも含めて全て次の画面サイズに継承させて、差分だけ上書きで書き換える方が多いと思います。

ただ、デザインによっては継承させるスタイルのほうが極端に少ないようなことも無くはないのであくまでケースバイケースかな、という気はします。

ちなみに0〜640pxであれば、
@media screen and (max-width: 640px) { ... }
とすれば良いのではないでしょうか？

Answer 2

---

スマートフォン 縦向き

スマートフォン 横向き
@media screen and (orientation:landscape)

大型スマートフォン／タブレット
@media screen and (min-width: 641px)

大型タブレット／PC
@media screen and (min-width: 981px)

---

私は以上のように記述しています。

順序に関しては、スマートフォンでのブラウジングがPCを上回ってきている昨今
よく言われるモバイルファーストの考え方に基づいて上記のようにスマートフォン向けレイアウトを基礎としています。