【CSS】要素の最小幅・高さを設定するmin-widthとmin-height

レスポンシブで構築する際に、要素の幅などを%(パーセント)で設定する事が多いですが、ブレイクポイントで可変する前に小さくなり過ぎてしまう事がたまにあります。要素の最小の幅や高さを設定する事でこれらを回避可能です。

min-width

div {
	width:100%;
	min-width:400px;
}

上記設定だと、親要素に対して100%の横幅に設定していますが、400px未満にはならず最小で400pxとなります。

min-widthと同じように、最小の高さを指定できるmin-heightというプロパティもあります。
こちらはmin-widthよりも使用頻度は低いですが、覚えておくと良いかと思います。

div {
	min-height:500px;
}

最大幅・高さを設定するmax-widthとmax-heightについては【CSS】要素の最大幅・高さを設定するmax-widthとmax-heightをご覧ください。