レスポンシブのCSSでfloatを使用した場合、高さを指定しないと回り込みがうまくいかずガチャガチャとしてしまう場合があります。
レスポンシブではあまり高さは指定したくありませんが、指定する場合は以下に気を付けます。
まず、必ずビューワーで確認すること
PCのウインドウを縮めただけだとスマホの状況を再現しきれません。
必ずビューワーで確認しましょう。
最低でもビューワーの横幅「300px代」と「400px代」の２種類の画面で確認すること
「300px代」でちょうどよい高さでも「400px代」だと高さが低く重なってしまいます。
iphoneと一部のアンドロイドは幅300px代なのですが、一部アンドロイドは幅400px代の端末があります。その場合は300px代でよくても、400px代では高さが足りず、要素が重なってしまいます。
以下のスマホ・タブレット用の３パターンのCSSを用意しておくと安心です
上から、ざっくりですが、ipad用、400px代用、300px代用、というイメージでCSSを用意しています。これにプラスしてパソコン用のCSSも別途用意が必要です。
@media only screen and (max-width: 990px) {
}/*990px end*/
@media only screen and (max-width: 640px) {
}/*640px end*/
@media only screen and (max-width: 380px) {
}/*380px end*/
まとめ
レスポンシブは様々な機種に対応しなければならず、込み入ったデザインですと大変な工数がかかりますが、スマホ端末については、上記３つのポイントで分岐してCSSを用意するのがおすすめです。
