|
De fleste innenlandske designere liker å bruke px, mens de fleste utenlandske nettsider liker å bruke EM og REM, så hva er forskjellen mellom de tre, og hva er fordelene og ulempene ved hver av dem? La oss gi deg en detaljert introduksjon. PX-funksjoner: 1. IE kan ikke justere skriftstørrelsen til de som bruker px som enhet; 2. Grunnen til at de fleste utenlandske nettsteder kan justeres, er at de bruker dem eller rem som fontenheter; 3. Firefox kan justere px, em og rem, men mer enn 96 % av kinesiske nettbrukere bruker IE-nettleseren (eller kjernen). px piksler. Relative lengdeenheter. Pixel px er relativt til skjermoppløsningen på skjermen. (Sitat fra CSS2.0-manualen) Em er en relativ lengdeenhet. Skriftstørrelse i forhold til teksten i det nåværende objektet. Hvis skriftstørrelsen på teksten i linjen ikke er kunstig satt, vil den være relativ til standard skriftstørrelse i nettleseren. (Sitat fra CSS2.0-manualen) Standard fonthøyde for enhver nettleser er 16px. Alle ujusterte nettlesere følger: 1em=16px. Så 12px=0,75em, 10px=0,625em. For å forenkle konverteringen til skriftstørrelse må du erklære font-size=62,5 % i kroppsvelgeren i CSS, som gjør em-verdien 16px*62,5%=10px, slik at 12px=1,2em, 10px=1em, altså trenger du bare å dele den opprinnelige px-verdien på 10, og så erstatte den med em som enhet. EM-funksjoner: 1. Verdien av dem er ikke fast; 2. em arver skriftstørrelsen til foreldreelementet. Så når vi skriver CSS, må vi være oppmerksomme på to ting: 1. Deklarer font-size=62,5 % i kroppsvelgeren; 2. Del din opprinnelige px-verdi på 10 og erstatt den med em som enhet; 3. Beregne em-verdiene på nytt for de forstørrede fontene. Unngå gjentatte deklarasjoner av skriftstørrelse. Det vil si, for å unngå fenomenet 1,2 * 1,2 = 1,44. For eksempel, hvis du erklærer skriftstørrelsen 1,2em i #content, kan det bare være 1em, ikke 1,2em, når du deklarerer skriftstørrelsen p, og det blir 1em=12px fordi det arver skrifthøyden til #content. REM-funksjoner rem er en ny relativ enhet (rot em) lagt til CSS3, som har tiltrukket seg mye oppmerksomhet. Hva er forskjellen mellom denne enheten og EM? Forskjellen er at når du bruker rem for å sette fontstørrelsen for et element, er det fortsatt den relative størrelsen, men den relative er bare HTML-rotelementet. Denne enheten kan sies å kombinere fordelene med relativ størrelse og absolutt størrelse, hvor den ikke bare kan endre rotelementet for å justere alle skriftstørrelser proporsjonalt, men også unngå kjedereaksjonen med sammensatte fontstørrelser lag for lag. For øyeblikket støttes rem i alle nettlesere unntatt IE8 og tidligere. For nettlesere som ikke støtter det, er svaret også veldig enkelt, nemlig å skrive en absolutt enhetssetning. Disse nettleserne ignorerer skriftstørrelsen satt med rem. Her er et eksempel: p {font-size:14px; fontstørrelse: .875rem; } Notat:Valget av fontenheter er i stor grad opp til prosjektet ditt, og hvis brukerbasen din bruker den nyeste versjonen av nettleseren, anbefales REM, hvis kompatibilitet er en bekymring, bruk px, eller begge deler. Her er adressen på et px, em, rem-enhetskonverteringsverktøy:http://pxtoem.com/
| 
Publisert på 21.03.2017 09:31:50
|
|
|
