max-widthの使い方

block要素のwidthの話

例えばdivはブロック要素なので、widthを指定しなければ、親要素のサイズに依存して大きくなったり小さくなったりする。

そこで

width:800px;
margin:0 auto;

をcssで指定してみると、もちろん800pxで大きさが固定される。
でも800pxより小さいウィンドウやスマートフォンなどで見たときは横方向のスライダーが生成されウィンドウ幅をはみ出してしまう。

そういうときには

max-width:800px;
margin:0 auto;

を指定すると、最大幅800pxからウィンドウ幅に合わせ小さくなってくれる。