質問: レスポンシブデザインを学んでいるのですが、どの大きさに対応すればスマホ、タブレット、pc別に表示することができるのでしょうか? 1. max-width:400pxでiphone5と6に対応しようたところviewが崩れてできなかったため、 2. max-width:480pxでiphone6スマホに対応したところviewは崩れなかったのですが、androidだと崩れてしまいました。 このとき、 1で0~400px 2で400~480pxに対応しているのではないのでしょうか? それとも下記のようにしないと400~480には対応してもらえないのでしょうか? 1. max-width:400px 2. min-width:401px 3. max-width:480px
回答: こうすれば確実ではないでしょうか。 (max-width:400px) (min-width:401px) and (max-width:479px) (min-width:480px) 書かれているような max-width:400px max-width:480px としてしまうと、たとえば400pxはmax-width:400pxにもmax-width:480pxにもあてはまりますので、書いている順にCSSが上書きされ、結果としてmax-width:480pxがなんとなく優勢に適用された結果となります。