Ez az oldal bemutatja a különböző CSS relatív mértékegységek működését. A relatív mértékegységek rugalmasabbá teszik a weboldal méretezését, és segítenek a reszponzív design megvalósításában.
Húzd a csúszkát az oldal alapbetűméretének módosításához. Figyeld meg, hogyan változnak a különböző mértékegységekkel megadott elemek!
em: Az aktuális elem betűméretéhez viszonyított méret. Öröklődik a szülőelemektől!
rem: Mindig a html (gyökér) elem betűméretéhez viszonyít, függetlenül a szülőelemektől.
vh (viewport height): A böngészőablak magasságához viszonyít. Például: ha a böngésződ ablaka 1000 pixel magas, akkor 1vh = 10 pixel. Tökéletes választás teljes képernyős elemek (pl. hero szekciók, landing page-ek) méretezéséhez.
vw (viewport width): A böngészőablak szélességéhez viszonyít. Például: ha a böngésződ 1200 pixel széles, akkor 1vw = 12 pixel. Ideális választás széles elemek, bannerek, háttérképek méretezéséhez.
vmin: A viewport kisebb méretét veszi alapul. Például: ha az ablakod 1200×800 pixeles, akkor 1vmin = 8 pixel (a 800-ból). Akkor hasznos, ha azt szeretnéd, hogy az elem a kisebb képernyőméretet vegye figyelembe.
vmax: A viewport nagyobb méretét veszi alapul. Például: ha az ablakod 1200×800 pixeles, akkor 1vmax = 12 pixel (az 1200-ból). Akkor jó választás, ha azt szeretnéd, hogy az elem a nagyobb képernyőméretet vegye figyelembe.
Itt láthatod, hogyan néz ki ugyanaz a számérték különböző mértékegységekkel.
Itt kipróbálhatod a különböző mértékegységeket. Válassz egy mértékegységet és egy értéket, majd figyeld meg, hogyan változik a tesztdoboz mérete!