min-widthプロパティとは？
min-widthは、「要素の最小幅の値」を指定するプロパティです。
なぜ、最小値が必要なのかというと、可変幅（例えばwidth:50%;等）を設定している場合、画面のサイズによって要素の幅のサイズを自動で調整してくれます。その際に、要素が画面サイズによっては小さくなりすぎてしまいます。
そのような時に、min-widthで最小値を設定しておけばそのサイズより小さくならずに済むというわけです。
以下の様に指定します。
div{
min-width:100px;
}min-widthの使用例
・ある要素に「width:10%;」を指定しているが、100px以下にはしたくない場合。
使用例：CSS
div{
width:10%;
min-width:100px;
background:#CCC;
}使用例：ブラウザ
min-widthで最小値を設定する
本来は、width:10%;だともっと幅は狭くなるはずですが、この場合は、100px以下には小さくなりません。このように、可変幅とセットで使用することが多いのが特徴です。
max-widthプロパティとは？
次に、max-widthプロパティです。max-widthは、min-widthと反対に「要素の最大幅の値」を指定することができます。こちらも、可変幅の場合によく使用されます。要素をこれ以上大きく表示したくない場合に使用します。
以下の様に指定します。
div{
max-width:100px;
}max-widthの使用例
・スマートフォン画面では、画像を画面幅より大きく表示したくない場合
使用例：CSS
img{
width:1000px;
max-width:100%;
height:auto;
}使用例：ブラウザ
max-widthで最大値を設定する
画像サイズは1000pxにも関わらず、枠からはみ出していません。これで、どんな画面サイズでもはみ出すことなく表示することができます。
max-widthを画像に使用する際の注意点
画像を可変幅にすることができましたが、「height:auto;」が実は重要な役割を果たしています。以下は、height（高さ）を指定していない場合です。
使用例：ブラウザ
高さを指定していない場合
高さを指定しないと、本来の画像の高さそのままの値となってしまい、縦横比が崩れてしまっています。
そこで、「height:auto;」を指定することで、幅に合わせて「縦横比」を維持するように高さを自動調整（auto）してくれます。
画像を可変幅にしたい場合は、「height:auto」をセットで設定することを忘れないようにしましょう。
min-heightとmax-heightも設定できる
ここまで、min-widthとmax-widthをみてきましたが、実はmin-heightとmax-heightというプロパティも存在します。「高さの最小値と最大幅」を指定できるのですが、この2つに関しては、ほとんど使う場面はありません。
使うとするならば、「froatで高さが無視されてしまう場合」や「デザインの体裁をよくする場合」などでしょう。
しかし、これらも「javascript」を使用して、整えるやり方が主流であり、可変幅のサイトでは使いづらいプロパティですから、頭の片隅に置いておく程度で問題ないと思います。
理解するポイントまとめ
- min-widthで最小値、max-widthで最大値を設定できる。
- 画像の幅を可変にする場合は、height:autoを指定する。