min-widthとwidthの使い分けについて

質問

重ねて質問すいません。
min-width、max-widthはどういうときに使えばいいのでしょうか？
なぜwidthではいけないのでしょうか？

min-widthを背景画像などを指定していて、レイアウトを崩さないために用いる場合は理由がよくわかるのですが、背景画像なども特に指定していない場合などは、width指定でも大丈夫のような気がするのですが……

すいませんが、ご教授お願いいたします。

回答No.1

ORUKA1951 · ベストアンサー

widthでは、巾が固定されてしまいます。
　最近は様々な端末が存在するため、幅の狭いディスプレイでは横スクロールを求められるし、幅広ディスプレイでは画面の一部しか使用されません。
　そこで、
body>div.header,body>div.section,body>div.footer{
width:90%;
min-width:640px;
max-width:900px;
margin:0 auto;
}
のように指定しておくと、ディスプレイ巾に合わせて表示部分は伸縮して表示されます。ここで、min-widthは、スマートフォンを意識しています。スマートフォン(縦)だと、640pxを320pxに縮小--約1/2に縮小して表示されます。(スマートフォンの利用が多いと想定される場合は、別のスタイルシートを読ませるなどになります)
　レイアウトは、幅が狭い場合は回り込ませるとかもあるのでそれほどは考えません。
たとえば
・アルバムのような写真と説明とかでしたら、640pxのときは横に２列ですが、900pxのときは３個並ばせるとか
・メニューとコンテンツが狭い画面では縦並びだが、広いときは横並びとか

　min-widthやmax-widthは、ディスプレイの巾を横スクロールなしで精一杯活用するが、上限と加減を設けるときに使用します。

お礼

度々すいません。解説ありがとうございます。

そういう風に使うのですか。
いろんな端末から閲覧されることを、考えるのは重要ですね。

回答ありがとうございました。