|
Majoritatea designerilor locali preferă să folosească px, în timp ce majoritatea site-urilor străine preferă să folosească em și rem, deci care este diferența dintre cele trei și care sunt avantajele și dezavantajele fiecăruia? Să vă facem o prezentare detaliată. Caracteristicile PX: 1. IE nu poate ajusta dimensiunea fontului celor care folosesc px ca unitate; 2. Motivul pentru care majoritatea site-urilor străine pot fi ajustate este că folosesc em sau rem ca unități de font; 3. Firefox poate ajusta px, em și rem, dar peste 96% dintre internauții chinezi folosesc browserul IE (sau kernel). pixeli px. Unități de lungime relativă. Pixel px este relativ la rezoluția ecranului monitorului. (Citat din manualul CSS2.0) Em este o unitate relativă de lungime. Dimensiunea fontului relativă la textul din obiectul curent. Dacă dimensiunea fontului textului din linie nu este setată artificial, aceasta va fi relativă la dimensiunea implicită a fontului browserului. (Citat din manualul CSS2.0) Înălțimea implicită a fontului pentru orice browser este 16px. Toate browserele neajustate respectă: 1em=16px. Apoi 12px=0.75em, 10px=0.625em. Pentru a simplifica conversia font-size, trebuie să declari font-size=62,5% în selectorul corpului în css, ceea ce face ca valoarea em să fie 16px*62,5%=10px, astfel încât 12px=1,2em, 10px=1em, ceea ce înseamnă că trebuie doar să împărțiți valoarea originală px la 10 și apoi să o înlocuiești cu em ca unitate. Caracteristici EM: 1. Valoarea lui em nu este fixă; 2. Em moștenește dimensiunea fontului elementului părinte. Așadar, când scriem CSS, trebuie să fim atenți la două lucruri: 1. Declarați dimensiunea fontului=62,5% în selectorul corpului; 2. Împarte valoarea originală px la 10 și înlocuiește-o cu em ca unitate; 3. Recalculați valorile em ale acelor fonturi mărite. Evită declarațiile repetate privind dimensiunea fontului. Adică, pentru a evita fenomenul 1.2 * 1.2 = 1.44. De exemplu, dacă declari dimensiunea fontului 1.2em în #content, atunci când declari dimensiunea fontului lui p, aceasta poate fi doar 1em, nu 1.2em, pentru că acest em nu este acel em, și devine 1em=12px deoarece moștenește înălțimea fontului lui #content. Caracteristici REM Rem este o nouă unitate relativă (root EM) adăugată în CSS3, care a atras multă atenție. Care este diferența dintre această unitate și EM? Diferența este că atunci când folosești rem pentru a seta dimensiunea fontului pentru un element, aceasta este tot dimensiunea relativă, dar relativa este doar elementul rădăcină HTML. Această unitate poate fi considerată că combină avantajele dimensiunii relative și dimensiunii absolute, prin care nu doar că poate modifica elementul rădăcină pentru a ajusta proporțional toate dimensiunile fontului, dar poate și evita reacția în lanț a compunerii dimensiunilor fonturilor strat cu strat. În prezent, rem este suportat în toate browserele, cu excepția IE8 și a celor anterioare. Pentru browserele care nu o suportă, răspunsul este de asemenea foarte simplu, și anume să scrii o instrucțiune unitate absolută. Aceste browsere ignoră dimensiunea fontului setată cu rem. Iată un exemplu: p {font-size:14px; font-size:.875rem; } Notă:Alegerea unităților de font ține în mare măsură de proiectul tău, iar dacă baza ta de utilizatori folosește cea mai recentă versiune a browserului, atunci se recomandă REM; dacă compatibilitatea este o problemă, folosește px sau ambele. Iată adresa uneltei de conversie a unităților px, em, rem:http://pxtoem.com/
| 
Postat pe 21.03.2017 09:31:50
|
|
|
