css3のmax-widthについて

Question

レスポンシブデザインでブレイクポイントを振り分けるのに
@media screen and (max-width: 320px)
としたとき、 max-width というのは 「320px未満」「320px以下」どちらになるのでしょうか？

文献によって表現がまちまちで困っています。
よろしくお願いいたします。

Answer 1

ちゃんと検証しておりませんが、たしか
max-width: 320pxの場合は、320pxが最高値になるので、320が含まれます。321から次の幅に変化することになるかと思います。
と思ってやっておりました。

（余談ですが、もしスマホ対応で320pxを設定しているとしたら、640pxに設定した方がよいですよ。というのは解像度の問題で、620pxを幅100%にして320pxの実寸で見せる方が画像が綺麗ですし、アンドロイドなどのちょっと大きめの端末にも対応できます。）

Comments

[tirutiru3]

そうですね、デバイスピクセル率ってのが厄介ですね。参考になりました。ありがとうございます。

Answer 2

悩んだ時は、自分でテスト的なコードを書いて試してみるのが
一番良いと思います。念の為、各ブラウザで見る事をオススメします。

body{
  background:#ffffff;
}

@media screen and (max-width: 320px) {
  body{
    background:#ff0000;
  }
}

Comments

[tirutiru3]

ブラウザのチェックはできても、各デバイスで違うのかな？とも思ったりして。それぞれ実機で確認できないのがきついです。

[退会済みユーザー]

スマホ・タブレット実機で見るのが一番確実ですが
全機種そろえるのは厳しいでしょう。（というか無理ですｗ）

なので、僕はchromeの開発ツールに頼りまくってます。
左から二番目のスマホアイコンをクリックしてデバイスモードに変更

デバイスモード左にある棒グラフみたいなアイコンをクリックして
mediaqueryの実装状態を確認する事が出来ます。意外と便利ですよ
もし、しらなかったら一度試してみてはいかがでしょうか？

[tirutiru3]

choromeのそのツール知ってますよ。便利で使ってます。だけど、iphone6　iphone6Plusがないな～　って思っていたんです。でも、今見てみたら新しく入ってました。
いろいろ試してみます。ありがとうございました。