匿名質問者
匿名質問者匿名質問者とは「匿名質問」を利用して質問した質問者。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら

独学で勉強をしていまして、わからない事がありまして質問をさせて頂きます。

メディアクエリを実装中で、どの幅に合わせて記述をするのかを迷っています。

メディアクエリを実装するとき、色々な記述の仕方がありますよね?

例えば
・1つ目
@media only screen and(max-width: 320px){・・・}

・2つ目
@media only screen and (min-width: 320px) and (max-width: 480px){・・・}

2つ目の実装の仕方でお聞きしたい事がありまして、この幅の調整をするとき(max-width: ○○○px)max-widthの幅に合わせて記述していくのか、それとも(min-width: ○○○px)min-widthの幅に合わせて記述していくのか教えて頂けませんでしょうか?

あと、スマホで多く使われている幅は640pxでいいのでしょうか?
それとも320pxの方がいいのでしょうか?

すみませんが、よろしくお願いいたします。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2015/12/21 15:41:34
  • 終了:2015/12/22 17:55:34

ベストアンサー

匿名回答1号 No.1

匿名回答1号「匿名質問」を利用した質問に回答すると「匿名回答○号」と匿名で表示されます。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら
2015/12/22 15:05:01

当方も独学で恐縮ですが。
min-widthとmax-widthを両方記載した場合、どちらの幅に合わせて記述をすべきかという話ですが、どちらにも合うように記述をすべきです。メディアクエリを勉強なさっているということはレスポンシブデザインを考えてらっしゃるのだと思いますが、一方の幅に合わせて記述したらレスポンシブの良さが損なわれてしまいます。

極端な一例として、2のメディアクエリを利用し、以下のようにCSSを記述したとします。

@media only screen and (min-width:320px) and (max-width:480px){
table{width:300px;}
}

幅320pxに合わせて、テーブルを300pxで表示されるようにしました。
この場合、幅320pxのブラウザではの余白は20pxになりますが、480pxのブラウザで見た時には180pxも生じるため、少々不格好なデザインになります。
逆に幅480pxに合わせようとすると、今度は幅480px以下のブラウザで見た際にデザインが崩れていきます。

ではどうすればよいのかという話になりますが、メディアクエリでブレイクポイントを決めたら、あとは幅の指定は固定pxに頼らず、%で相対的に行っていくのが良いです(いわゆるリキッドレイアウト)。

@media only screen and (min-width:320px) and (max-width:480px){
table{width:90%;}
}

とすると、幅サイズにかかわらず、幅に対して90%のテーブルを作成することができます。
他にもレスポンシブならではのテクニックはいくつかありますが、作成していく中で自分のやりやすい方法を見つけていくと楽しみが増えると思います。
メディアクエリ(というかレスポンシブデザイン)は最初はとっつきにくく、PCデザインに慣れているほどつい固定pxを乱用したくなりますが、慣れれば割と簡単にできるので頑張ってください。


また、スマホ幅ですが、以下を参考にしてください。

iPhone6の時代のviewport設定について
http://qiita.com/fnobi/items/4bec5ddf4ea83c5e1820

以上、長くなってしまいましたが、参考になれば幸いです。

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません