|
A legtöbb hazai tervező szereti a px-et, míg a legtöbb külföldi weboldal az em és rem rendszereket, szóval mi a különbség a három között, és mik az előnyei és hátrányai mindegyiknek? Adjunk egy részletes bemutatkát. PX funkciók: 1. Az IE nem tudja állítani azok betűméretét, amelyek px-et használnak egységként; 2. A legtöbb külföldi weboldal módosításának oka az, hogy az em vagy rem betűtípus egységként szerepel; 3. A Firefox képes állítani a px, em, rem funkciókat, de a kínai netek több mint 96%-a IE böngészőt (vagy kernelt) használ. px pixelek. Relatív hosszúságú egységek. Pixel px a monitor képernyőfelbontásához viszonyítható. (Idézet a CSS2.0 kézikönyvből) Az EM a hosszúság relatív egysége. Betűméret a jelenlegi objektum szövegéhez képest. Ha a sorban lévő szöveg betűmérete nincs mesterségesen beállítva, az a böngésző alapértelmezett betűméretéhez viszonyítva lesz. (Idézet a CSS2.0 kézikönyvből) Bármely böngésző alapértelmezett betűtípus magassága 16px. Minden módosítatlan böngésző megfelel: 1em=16px. Ekkor 12px=0,75em, 10px=0,625em. A betűméret-átalakítás egyszerűsítéséhez a css törzsválasztójában font-size=62,5% be kell nyilvánítani, így az em érték 16px*62,5%=10px, tehát 12px=1,2em, 10px=1em, ami azt jelenti, hogy csak az eredeti px értéket kell osztanod 10-re, majd az em egységre cserélni. EM jellemzők: 1. Az em értéke nem rögzített; 2. Az em örökli az anyaelem betűméretét. Tehát amikor CSS-t írunk, két dologra kell figyelnünk: 1. Jelölje betűméret=62,5% a test választóban; 2. Oszd el az eredeti px értéket 10-cel, és cseréld le az egység em-re; 3. Számold újra a megnagyobbított betűtípusok em értékeit. Kerüld az ismételt betűméret-nyilatkozatokat. Vagyis elkerülni az 1,2 * 1,2 = 1,44 jelenséget. Például, ha az 1,2em betűméretét #content-ben hirdeted, akkor a p betűméretének deklarálásakor csak 1em lehet, nem 1,2em, mert ez az em nem az em, és 1em=12px lesz, mert örökli #content betűtípus magasságát. REM jellemzők a rem egy új relatív egység (root em), amelyet a CSS3-hoz adtak be, és amely sok figyelmet keltett. Mi a különbség ez az egység és az EM között? A különbség az, hogy amikor rem-et használsz egy elem betűméretének beállításához, akkor is a relatív méret marad, de a relatív csak a HTML gyökérelem. Ez az egység kombinálja a relatív méret és az abszolút méret előnyeit, amelyek révén nemcsak a gyökérelemet tudja módosítani, hogy arányosan igazítsa az összes betűtípus méretét, hanem elkerüli a betűméretek rétegről rétegre történő összetett láncreakcióját is. Jelenleg a rem minden böngészőben támogatott, kivéve az IE8-at és az előzőket. Azoknál a böngészőknél, amelyek nem támogatják, a válasz is nagyon egyszerű: egy abszolút egység állítást írni. Ezek a böngészők figyelmen kívül hagyják a rem-mel beállított betűméretet. Íme egy példa: p {font-size:14px; betűméret: .875 rem; } Jegyzet:A betűtípusok kiválasztása nagyrészt a projektedtől függ, és ha a felhasználói bázisod a böngésző legújabb verzióját használja, akkor a REM ajánlott, ha kompatibilitás kérdéses, akkor használj px-et, vagy mindkettőt. Íme egy px, em, rem egység átalakító eszköz címe:http://pxtoem.com/
| 
Közzétéve 2017. 03. 21. 9:31:50
|
|
|
