|
De fleste indenlandske designere kan lide at bruge px, mens de fleste udenlandske hjemmesider foretrækker at bruge em og rem, så hvad er forskellen på de tre, og hvad er fordele og ulemper ved hver? Lad os give dig en detaljeret introduktion. PX-funktioner: 1. IE kan ikke justere skriftstørrelsen på dem, der bruger px som enhed; 2. Grunden til, at de fleste udenlandske hjemmesider kan justeres, er, at de bruger dem eller rem som skrifttypeenheder; 3. Firefox kan justere px, em og rem, men mere end 96% af kinesiske netbrugere bruger IE-browseren (eller kernen). px pixels. Relative længdeenheder. Pixel px er relativ til skærmens opløsning. (Citeret fra CSS2.0-manualen) em er en relativ længdeenhed. Skriftstørrelse i forhold til teksten inden for det aktuelle objekt. Hvis skriftstørrelsen på teksten i linjen ikke er kunstigt sat, vil den være relativ til browserens standard skriftstørrelse. (Citeret fra CSS2.0-manualen) Standardskrifttypehøjden for enhver browser er 16px. Alle ujusterede browsere overholder: 1em=16px. Så 12px=0,75em, 10px=0,625em. For at forenkle konverteringen til skriftstørrelse skal du erklære font-size=62,5% i brødtekstvælgeren i CSS, hvilket gør em-værdien 16px*62,5%=10px, så 12px=1,2em, 10px=1em, hvilket betyder, at du kun behøver at dividere din oprindelige px-værdi med 10 og derefter erstatte den med em som enhed. EM-funktioner: 1. Værdien af dem er ikke fast; 2. em arver skriftstørrelsen på forældreelementet. Så når vi skriver CSS, skal vi være opmærksomme på to ting: 1. Deklarér font-size=62,5% i brødtekstvælgeren; 2. Divider din oprindelige px-værdi med 10 og erstat den med em som enhed; 3. Genberegne em-værdierne for de forstørrede skrifttyper. Undgå gentagne deklarationer af skriftstørrelse. Det vil sige for at undgå fænomenet 1,2 * 1,2 = 1,44. For eksempel, hvis du erklærer skriftstørrelsen 1,2em i #content, så kan skriftstørrelsen p, når du erklærer skriftstørrelsen p, kun være 1em, ikke 1,2em, fordi denne em ikke er den em, og den bliver 1em=12px, fordi den arver skrifttypehøjden på #content. REM-funktioner rem er en ny relativ enhed (root em), der er tilføjet CSS3, og som har tiltrukket sig meget opmærksomhed. Hvad er forskellen på denne enhed og EM? Forskellen er, at når du bruger rem til at sætte skriftstørrelsen for et element, er det stadig den relative størrelse, men den relative er kun HTML-rodelementet. Denne enhed kan siges at kombinere fordelene ved relativ størrelse og absolut størrelse, hvorigennem den ikke blot kan ændre rodelementet for at justere alle skrifttypestørrelser proportionalt, men også undgå kædereaktionen med sammensatte skriftstørrelser lag for lag. I øjeblikket understøttes rem i alle browsere undtagen IE8 og tidligere. For browsere, der ikke understøtter det, er svaret også meget enkelt, nemlig at skrive en absolut enhedssætning. Disse browsere ignorerer skriftstørrelsen, der er sat med rem. Her er et eksempel: p {font-size:14px; skrifttypestørrelse: .875rem; } Seddel:Valget af skrifttypeenheder afhænger i høj grad af dit projekt, og hvis din brugerbase bruger den nyeste version af browseren, anbefales REM, hvis kompatibilitet er en bekymring, så brug px eller begge dele. Her er en adresse på et px, em, rem-enhedskonverteringsværktøj:http://pxtoem.com/
| 
Opslået på 21/03/2017 09.31.50
|
|
|
