|
La maggior parte dei designer nazionali preferisce usare px, mentre la maggior parte dei siti stranieri preferisce usare em e rem, quindi qual è la differenza tra i tre e quali sono i vantaggi e gli svantaggi di ciascuno? Facciamo una presentazione dettagliata. Caratteristiche del PX: 1. IE non può regolare la dimensione del font di coloro che usano px come unità; 2. Il motivo per cui la maggior parte dei siti stranieri può essere adattata è che usano em o rem come unità di font; 3. Firefox può regolare px, em e rem, ma più del 96% dei netizen cinesi usa il browser (o kernel) IE. PX pixel. Unità di lunghezza relativa. Il pixel px è relativo alla risoluzione dello schermo del monitor. (Citato dal manuale CSS2.0) em è un'unità relativa di lunghezza. Dimensione del font rispetto al testo all'interno dell'oggetto corrente. Se la dimensione del carattere del testo nella riga non è impostata artificialmente, sarà relativa alla dimensione predefinita del font del browser. (Citato dal manuale CSS2.0) L'altezza predefinita del font per qualsiasi browser è 16px. Tutti i browser non regolati rispettano: 1em=16px. Poi 12px=0,75em, 10px=0,625em. Per semplificare la conversione in dimensione font, devi dichiarare font-size=62.5% nel selettore del corpo in css, il che rende il valore em 16px*62.5%=10px, così che 12px=1.2em, 10px=1em, il che significa che devi dividere solo il valore px originale per 10, e poi sostituirlo con em come unità. Caratteristiche di EM: 1. Il valore di em non è fisso; 2. Em eredita la dimensione del font dell'elemento genitore. Quindi, quando scriviamo CSS, dobbiamo prestare attenzione a due cose: 1. Dichiarare dimensione del font=62,5% nel selettore del corpo; 2. Dividere il valore px originale per 10 e sostituirlo con em come unità; 3. Ricalcola i valori em di quei font ingranditi. Evita dichiarazioni ripetute sulla dimensione del carattere. Cioè, per evitare il fenomeno di 1,2 * 1,2 = 1,44. Ad esempio, se dichiari la dimensione del font di 1.2em in #content, allora dichiarando la dimensione del font di p, può essere solo 1em, non 1.2em, perché questo em non è quel em, e diventa 1em=12px perché eredita l'altezza del font di #content. Caratteristiche REM rem è una nuova unità relativa (root em) aggiunta a CSS3, che ha attirato molta attenzione. Qual è la differenza tra questa unità e l'em? La differenza è che quando usi rem per impostare la dimensione del font di un elemento, è comunque la dimensione relativa, ma la relativa è solo la radice HTML. Si può dire che questa unità combina i vantaggi della dimensione relativa e della dimensione assoluta, grazie ai quali non solo può modificare solo l'elemento radice per regolare proporzionalmente tutte le dimensioni dei font, ma anche evitare la reazione a catena di composizione delle dimensioni dei font layer per layer. Attualmente, REM è supportato in tutti i browser tranne IE8 e precedenti. Per i browser che non lo supportano, la risposta è anche molto semplice, ovvero scrivere un'istruzione unità assoluta. Questi browser ignorano la dimensione del font impostata con rem. Ecco un esempio: p {font-size:14px; dimensione font: .875rem; } Nota:La scelta delle unità di font dipende in gran parte dal tuo progetto, e se la tua base utenti utilizza l'ultima versione del browser, allora REM è consigliato; se la compatibilità è un problema, allora usa px, o entrambi. Ecco l'indirizzo dello strumento di conversione delle unità px, em, REM:http://pxtoem.com/
| 
Pubblicato su 21/03/2017 09:31:50
|
|
|
