|
Většina domácích designérů ráda používá px, zatímco většina zahraničních webů je používá a rem, takže jaký je mezi těmito třemi rozdíl a jaké jsou výhody a nevýhody každého z nich? Pojďme vám to podrobně představit. Funkce PX: 1. IE nemůže upravovat velikost písma u těch, které používají px jako jednotku; 2. Důvod, proč lze většinu zahraničních webů upravit, je ten, že používají em nebo rem jako jednotky písma; 3. Firefox může upravovat px, em a rem, ale více než 96 % čínských uživatelů internetu používá prohlížeč (nebo jádro) IE. PX pixely. Relativní délkové jednotky. Pixel px je relativní k rozlišení obrazovky monitoru. (Citováno z manuálu CSS2.0) em je relativní jednotka délky. Velikost písma vzhledem k textu v aktuálním objektu. Pokud velikost písma v řádku není uměle stanovena, bude relativní k výchozí velikosti písma prohlížeče. (Citováno z manuálu CSS2.0) Výchozí výška písma pro jakýkoli prohlížeč je 16px. Všechny neupravené prohlížeče vyhovují: 1em=16px. Pak 12px=0,75em, 10px=0,625em. Pro zjednodušení převodu velikosti písma musíte v css deklarovat velikost písma=62,5 % ve výběru těla, což udělá em hodnotu 16px*62,5%=10px, takže 12px=1,2em, 10px=1em, což znamená, že stačí původní hodnotu px vydělit 10 a nahradit ji jednotkou em. Funkce EM: 1. Hodnota em není pevně daná; 2. em dědí velikost písma rodičovského prvku. Takže když píšeme CSS, musíme věnovat pozornost dvěma věcem: 1. Deklarovat velikost písma=62,5 % v těle výběru; 2. Vydělte původní hodnotu px číslem 10 a nahraďte ji jednotkou em jako jednotkou; 3. Přepočítat em hodnoty těchto zvětšených fontů. Vyhněte se opakovaným prohlášením o velikosti písma. To znamená, že se vyhnout jevu 1,2 * 1,2 = 1,44. Například pokud v #content deklarujete velikost písma 1.2em, pak při deklaraci velikosti písma p může být pouze 1em, ne 1.2em, protože toto em není to em, a stane se 1em=12px, protože dědí výšku písma #content. Funkce REM REM je nová relativní jednotka (kořen EM) přidaná do CSS3, která vzbudila velkou pozornost. Jaký je rozdíl mezi touto jednotkou a EM? Rozdíl je v tom, že když použijete rem k nastavení velikosti písma pro prvek, stále je to relativní velikost, ale relativní je jen HTML kořenový prvek. Tato jednotka kombinuje výhody relativní a absolutní velikosti, díky čemuž může nejen upravit pouze kořenový prvek a přizpůsobit všechny velikosti písma proporcionálně, ale také se vyhnout řetězové reakci složení velikostí písma vrstva po vrstvě. V současnosti je REM podporován ve všech prohlížečích kromě IE8 a starších. Pro prohlížeče, které to nepodporují, je odpověď také velmi jednoduchá, tedy napsat absolutní jednotkový příkaz. Tyto prohlížeče ignorují velikost písma nastavenou pomocí rem. Tady je příklad: p {font-size:14px; velikost písma: .875rem; } Poznámka:Volba typů fontů závisí hlavně na vašem projektu, a pokud vaše uživatelská základna používá nejnovější verzi prohlížeče, doporučuje se REM, pokud je kompatibilita problém, použijte px, nebo obojí. Tady je adresa nástroje pro převod px, em, rem jednotek:http://pxtoem.com/
| 
Zveřejněno 21.03.2017 9:31:50
|
|
|
