CSS Min és Max értékek
A min- és max-tulajdonságok segítségével korlátozhatjuk az elemek méretét. Így biztosítható, hogy egy elem ne legyen túl kicsi vagy túl nagy, még akkor sem, ha a szülő konténer mérete változik.
Elérhető tulajdonságok
A min-width, max-width, min-height és max-height beállítások finomhangolást biztosítanak az elrendezéshez. Ezeket gyakran használják reszponzív design kialakításánál.
| Tulajdonság | Leírás |
|---|---|
| min-width | Beállítja a minimális szélességet, amely alá az elem nem mehet. |
| max-width | Beállítja a maximális szélességet, amely fölé az elem nem nőhet. |
| min-height | Beállítja a minimális magasságot, amely alá az elem nem mehet. |
| max-height | Beállítja a maximális magasságot, amely fölé az elem nem nőhet. |
Példa fix korlátozásokkal
Az alábbi példában a doboz minimális és maximális szélességgel és magassággal rendelkezik.
A piros doboz 200 és 400 pixel közötti szélességű lehet, és 100 és 200 pixel közötti magasságú.
Reszponzív használat
A min és max értékek százalékos szélességekkel kombinálva kiválóan alkalmazhatók reszponzív elrendezésekhez.
Tippek a min és max használatához
A min- és max-tulajdonságok segítenek megakadályozni az elemek szélsőséges zsugorodását vagy nyúlását.
- Használd a min-width-et mobilon, hogy a szövegek ne törjenek túl szűk oszlopokba.
- A max-width segít abban, hogy a tartalom olvasható maradjon nagy képernyőkön is.
- Kombináld a min és max értékeket százalékos szélességekkel a tökéletes reszponzív hatásért.
✨ Kérdezd Larát — a tanulási partnered
Fedezd fel a személyre szabott tanulási támogatást. Lara elmagyarázza az anyagot, összefoglalja a témákat és megválaszolja a kérdéseidet — az Go csomagtól elérhető.
Lara segít gyorsabban tanulni — kizárólag a ReadyTools Go, Plus és Max tagoknak.
