|
Väčšina domácich dizajnérov rada používa px, zatiaľ čo väčšina zahraničných webstránok ich používa a REM, takže aký je rozdiel medzi týmito tromi a aké sú výhody a nevýhody každého z nich? Dám vám podrobný úvod. Funkcie PX: 1. IE nemôže upravovať veľkosť písma tých, ktoré používajú px ako jednotku; 2. Dôvod, prečo sa väčšina zahraničných webových stránok dá upraviť, je ten, že používajú em alebo rem ako jednotky písma; 3. Firefox dokáže upravovať px, em a rem, ale viac ako 96 % čínskych používateľov používa prehliadač (alebo jadro) IE. PX pixely. Relatívne jednotky dĺžky. Pixel px je relatívny k rozlíšeniu obrazovky monitora. (Citované z manuálu CSS2.0) em je relatívna jednotka dĺžky. Veľkosť písma vzhľadom na text v aktuálnom objekte. Ak veľkosť písma textu v riadku nie je umelo nastavená, bude relatívna k predvolenej veľkosti písma prehliadača. (Citované z manuálu CSS2.0) Predvolená výška písma pre akýkoľvek prehliadač je 16px. Všetky neupravené prehliadače spĺňajú podmienky: 1em=16px. Potom 12px=0.75em, 10px=0.625em. Na zjednodušenie konverzie veľkosti písma musíte v telegrafickom výbere v css deklarovať veľkosť písma=62,5 %, čo znamená, že em hodnota je 16px*62,5%=10px, takže 12px=1,2em, 10px=1em, čo znamená, že stačí vydeliť pôvodnú hodnotu px 10 a potom ju nahradiť em ako jednotkou. EM vlastnosti: 1. Hodnota em nie je pevná; 2. em dedí veľkosť písma rodičovského prvku. Takže keď píšeme CSS, musíme venovať pozornosť dvom veciam: 1. Deklarovať veľkosť písma=62,5 % vo výbere tela; 2. Vydelte pôvodnú hodnotu px číslom 10 a nahraďte ju jednotkou em ako jednotkou; 3. Prepočítajte em hodnoty týchto zväčšených fontov. Vyhnite sa opakovaným deklaráciám o veľkosti písma. To znamená, že sa vyhýba javu 1,2 * 1,2 = 1,44. Napríklad, ak deklarujete veľkosť písma 1.2em v #content, potom pri deklarovaní veľkosti písma p môže byť len 1em, nie 1.2em, pretože toto em nie je to em, a stane sa 1em=12px, pretože zdedí výšku písma #content. REM funkcie REM je nová relatívna jednotka (root EM) pridaná do CSS3, ktorá vzbudila veľkú pozornosť. Aký je rozdiel medzi touto jednotkou a EM? Rozdiel je v tom, že keď použijete rem na nastavenie veľkosti písma pre prvok, stále je to relatívna veľkosť, ale relatívna je len HTML koreňový prvok. Táto jednotka kombinuje výhody relatívnej a absolútnej veľkosti, vďaka čomu dokáže nielen upraviť len koreňový prvok a upraviť všetky veľkosti písma proporcionálne, ale tiež sa vyhnúť reťazovej reakcii zloženia veľkostí písma vrstva po vrstve. V súčasnosti je REM podporovaný vo všetkých prehliadačoch okrem IE8 a starších. Pre prehliadače, ktoré to nepodporujú, je odpoveď tiež veľmi jednoduchá, teda napísať absolútny jednotkový príkaz. Tieto prehliadače ignorujú veľkosť písma nastavenú s rem. Tu je príklad: p {font-size:14px; veľkosť písma: .875rem; } Nota:Výber fontových jednotiek závisí najmä od vášho projektu, a ak vaša používateľská základňa používa najnovšiu verziu prehliadača, odporúča sa REM, ak je kompatibilita problémom, použite px, alebo oboje. Tu je adresa nástroja na konverziu px, em, rem jednotiek:http://pxtoem.com/
| 
Zverejnené 21. 3. 2017 9:31:50
|
|
|
