px, pt, em, százalék

by

in

Frissítés: Itt az ultimate eszköz: pxtoem. Mindent tud, számol, kalkulál, generál.

Ha weboldalt kell gyártani, alapvetően nekem a px a default mértékegység. Sajnos másoknak nem, így akad néha némi kavarodás. Valamiért itt a távolság mérés nem az SI mértékekkel működik. Viszont, hogy senki ne zavarodjon össze, a Roy Reed a REEDdesign alapítója csinált egy egyszerű kis táblázatot, amit most saját magamnak, s azok számára, akik esetleg néha még elvesznek a mértékegységek kusza világában, itt is közlök.

pt px Em %
6pt 8px 0.5em 50%
7pt 9px 0.55em 55%
7.5pt 10px 0.625em 62.5%
8pt 11px 0.7em 70%
9pt 12px 0.75em 75%
10pt 13px 0.8em 80%
10.5pt 14px 0.875em 87.5%
11pt 15px 0.95em 95%
12pt 16px 1em 100%
13pt 17px 1.05em 105%
13.5pt 18px 1.125em 112.5%
14pt 19px 1.2em 120%
14.5pt 20px 1.25em 125%
15pt 21px 1.3em 130%
16pt 22px 1.4em 140%
17pt 23px 1.45em 145%
18pt 24px 1.5em 150%
20pt 26px 1.6em 160%
22pt 29px 1.8em 180%
24pt 32px 2em 200%
26pt 35px 2.2em 220%
27pt 36px 2.25em 225%
28pt 37px 2.3em 230%
29pt 38px 2.35em 235%
30pt 40px 2.45em 245%
32pt 42px 2.55em 255%
34pt 45px 2.75em 275%
36pt 48px 3em 300%

Comments

6 responses to “px, pt, em, százalék”

  1. Ez ugye csak akkor igaz, ha a body elemnél, (vagy az adott elem szülőeleménél) nem adtál meg betűméretet. Máskülönben a % az inherit betűméret százaléka, az 1 em pedig megegyezik annak magasságával.

  2. Sajnos a px nem a legbaratsagosabb, pl. elerhetoseg (accessibility) szempontbol. A szakirodalom es a bongeszok is megkovetelik a megfelelo mukodeshez a valamivel rugalmasabb mertekegyseget, mint a keppont. Amugy, nem eppen ertem ezt a tablazatot, mivel az em az alap %-tol fugg. Pl. ha a body-nak adok 75% es a tobbi em-ben van megadva, akkor az 1em csak .75 lesz, radasaul az alap betumeret sem minden bongeszoben ugyanaz (igaz, ez mara mar kezd normalizalodni, de ugy-e meg sok a regi bongeszo, amit corporate alkalmazasoknal meg tamogatni kell).

    1. A px – pt átváltás működik. Nekem az kellett igazándiból. Bevallom a maradékot nem néztem meg rendesen, de jogos, amit írsz.

  3. @kdani, azt probalom kifejezni, hogy ha a body-ban megadsz %-ban valamit, akkor az befolyasolja, hogy a leszarmazott elemekben az em mekkora hatassal van a px-hez kepest. Pl. az 1em lehet 10px, ha a body 100%, de ugyancsak az az 1em lehet 7.5px is, body 75%-on.

  4. Az inherit betűméret magasságára gondoltam. Vagyis az egy em megegyezik a szülő elem betűméretének magasságával. Viszont a % hatása ha jól tudom összeadódik. Ha a betűméret 50%, és ezt a tulajdonságot örökli a gyermek elem, akkor a gyermek elem 50% pixelben meg fog egyezni a szülő elem 25%-ával. Tehát ha mondjuk a body betűmérete 20px, egy div betűmérete pedig 50%, akkor a diven belül lévő p-k betűmérete nem 10px, hanem 5px lesz. Mondjuk %-ot sohasem használtam, javítsatok ki, ha tévednék! Ha a body 100%, az a legtöbb böngésző esetében tudtommal 16px-et jelent. Ami 12pt-vel egyenlő. Viszont a pt mértékegység problémás, mert csak a 96dpi-s eszközökön 16px. A px viszont azért problémás, mert nem méretezhető. (Kivétel a legújabb böngészők, amiben text zoom helyett már page zoom van) Így az én szememben a legpraktikusabban használható egység az em. Az em alapértelmezett betűmérettel 16 px, a 0.5em pedig 8px; Ha a felhasználó adott esetben rosszul lát, és emiatt arra kényszerül, hogy a betűméretet duplájára növelje, semmi gond: az 1em 32px lesz, a 0.5em pedig 16px és minden jó. A fogyatékkal élő személy pedig örül, mert nem kényszerítik külön stíluslap használatára. Azért, hogy arra is figyeljünk, hogy megnövelt betűméret mellett ne csússzon szét az oldalunk, érdemes megadni minden méretet az em mértékkel. Vagyis ha a dobozunk pl 10em széles(azaz kb 20 betű fér bele), megnövelt betűméret esetén nem 160px-nek, hanem 320px-nek jeleníti meg a böngésző. Ez elég jó, mivel sok oldal csak így olvasható ha a látogató rosszul lát és ne adj isten, valamilyen ok miatt(pl munkahelyi megkötések) egy matuzsálem böngészőt kényszerül használni.

    Ha valami hülyeséget írtam, kérlek javítsatok ki!

  5. Ha jól emlékszem a W3C az em-et ajánlja alapértelmezettnek, én mindenhol igyekszem azt használni.