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.

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.