max-width、min-widthの使用目的

しばらく更新できませんでしたが、最近は模写コーディングを継続してます。

そんな中、今まではmax-widthのみ使用したサイトを模写していましたが、ある時min-widthを使用したサイトを模写することになりました。

「max-widthの反対と考えればいいでしょ」と思ってましたが、目的としては２通りあると解説サイトに記載があったため、ここでまとめておきます。

1.min-width

※ある親要素の中に子要素があった場合、子要素に対してwidth50%を指定したとします。

---min-widthなし---

PC画面では視認できても、スマホ画面では視認できないサイズとなる可能性があります。

---min-widthあり---

min-widthのサイズより小さく表示されないため、min-widthのサイズをスマホ画面でも視認できるようにしておけば視認できます。

2.max-width

※ある要素に対してwidth80%を指定したとします。

---max-widthなし---

要素サイズがスマホ画面では適切でも、PC画面では大きすぎる可能性があります。

---max-widthあり（目的1）---

max-widthのサイズより大きく表示されないため、max-widthのサイズをPC画面でも適切なサイズにしておけば大きくなりすぎません。

---max-widthあり（目的2）---

画像にmax-width:100%と指定すれば、PC・スマホの画面サイズを超えて画像を表示させないようにできます。