CSSレスポンシブ対応(自分用メモ)

レスポンシブ対応の書き方

画面の幅が767px以下だった時、{}の中に書いたCSSが適応される
※ipadの画面が768pxのためこの設定

よく変更を行うポイント

①横並びにしていた画像がうまく表示されないことが多いので、floatをnoneで解除していく。
◆floatを設定していると、見えてはいないがafterの枠が存在しており、テキストなどで横並びにした時に若干間隔がずれている。
レスポンシブでfloatを解除している時は、下記をレスポンシブの共通スタイルにいれてクリアしておく

②PCよりも縦長表示のことが多いので、背景画像等はpaddingの上下を広めにする

③font-sizeを小さめに設定

ボックス分けをしていれば大きな調整は必要ないことが多く、上記に書いたような微調整で足りる