CSSで画面サイズを小さくすると、レイアウト崩れる問題

自身の備忘録を書いていきます。

最近cssでレイアウト完成！よしッ！て思って縮小して見たら
すごい勢いでレイアウトが崩れるので
レスポンシブについて少し調べてみた。

解決方法

img.main {
  width: ~~ px;
  max-width: 100%;
  height: auto;

　　
横幅の最大値を合わせる記述の
max-width: 100%;
と

高さを合わせてくれる
height: auto;
の記述をセットで足してあげる。

後はレイアウトに合ったwidthを決めてあげれば
真ん中をキープしたまま画面縮小できる。
　　

この時、余りmarginで横幅をいじらない方がいいらしい。
paddingで位置調整すると崩れにくいらしい。

cssって簡単そうに見えて奥が深くて楽しいです。