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”
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.
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).
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.
@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.
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!
Ha jól emlékszem a W3C az em-et ajánlja alapértelmezettnek, én mindenhol igyekszem azt használni.