CSS Szélesség és Magasság
A width és height tulajdonságok határozzák meg egy elem szélességét és magasságát. Ezek az értékek alapvetően befolyásolják az elrendezést és a reszponzív viselkedést.
Alapvető tulajdonságok
A szélesség és magasság szabályozásához a width, height, min-width, max-width, min-height és max-height értékek használhatók. Ezek lehetővé teszik, hogy fix vagy rugalmas méreteket adjunk az elemeknek.
| Tulajdonság | Leírás |
|---|---|
| width | Beállítja az elem szélességét. |
| height | Beállítja az elem magasságát. |
| min-width / max-width | Meghatározza az elem minimális és maximális szélességét. |
| min-height / max-height | Meghatározza az elem minimális és maximális magasságát. |
Fix és rugalmas méretek
Az alábbi példában bemutatjuk, hogyan adható meg fix méret, valamint minimális és maximális szélesség.
Az első doboz fix 200px szélességű és 100px magas. A második doboz rugalmas, legalább 150px, de legfeljebb 300px széles.
Százalékos méretek
A szélességet százalékban is megadhatjuk, ilyenkor az elem a szülő szélességéhez igazodik.
Viewport alapú méretek
A CSS-ben a viewport egységekkel (vw, vh) a képernyő szélességéhez és magasságához igazíthatjuk az elemek méretét. Például a 100vw szélesség mindig a teljes ablak szélességét foglalja el.
Az alábbi példában a doboz a teljes képernyő szélességét és a képernyő magasságának felét foglalja el.
Dinamikus és fluid elrendezések
A min(), max() és clamp() függvényekkel rugalmasabban szabályozhatjuk az elemek méretét. Ezek lehetővé teszik a minimum, maximum és ideális méretek kombinálását.
Az alábbi kód egy olyan dobozt hoz létre, amelynek szélessége 200px és 600px között marad, de ideálisan 50% széles.
Tippek a width és height használatához
A megfelelő méretezés kulcsfontosságú a reszponzív dizájn kialakításában.
- Használj százalékos értékeket vagy viewport egységeket a reszponzív elrendezéshez.
- A min és max értékek segítenek az elemek túlzott zsugorodásának vagy nyúlásának megakadályozásában.
- Kerüld a túl sok fix méret használatát, mert az ronthatja a mobilos megjelenítést.
✨ 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.
