|
De meeste binnenlandse ontwerpers gebruiken graag PX, terwijl de meeste buitenlandse websites EM en REM gebruiken, dus wat is het verschil tussen de drie en wat zijn de voor- en nadelen van elk? Laten we je een gedetailleerde introductie geven. PX-functies: 1. IE kan de lettergrootte van degenen die px als eenheid gebruiken niet aanpassen; 2. De reden waarom de meeste buitenlandse websites aangepast kunnen worden, is dat ze em of rem als lettertype-units gebruiken; 3. Firefox kan px, em en rem aanpassen, maar meer dan 96% van de Chinese internetgebruikers gebruikt IE-browser (of kernel). px pixels. Relatieve lengte-eenheden. Pixel PX is relatief aan de schermresolutie van de monitor. (Geciteerd uit de handleiding van CSS2.0) em is een relatieve lengte-eenheid. Lettergrootte ten opzichte van de tekst binnen het huidige object. Als de lettergrootte van de tekst in de regel niet kunstmatig is ingesteld, zal deze relatief zijn aan de standaard lettergrootte van de browser. (Geciteerd uit de handleiding van CSS2.0) De standaard lettertypehoogte voor elke browser is 16px. Alle niet-aangepaste browsers voldoen: 1em=16px. Dan 12px=0,75em, 10px=0,625em. Om de lettertype-grootte conversie te vereenvoudigen, moet je font-size=62,5% declareren in de body selector in CSS, waardoor de em-waarde 16px*62,5%=10px is, zodat 12px=1,2em, 10px=1em, wat betekent dat je je oorspronkelijke px-waarde alleen hoeft te delen door 10, en deze dan als eenheid hoeft te vervangen door em. EM-kenmerken: 1. De waarde van em is niet vast; 2. em erft de lettergrootte van het ouderelement. Dus wanneer we CSS schrijven, moeten we op twee dingen letten: 1. Verklaar lettergrootte=62,5% in de lichaamsselectie; 2. Deel je oorspronkelijke px-waarde door 10 en vervang deze door em als eenheid; 3. Herbereken de em-waarden van die vergrote lettertypen. Vermijd herhaalde declaraties van lettergrootte. Dat wil zeggen, om het fenomeen 1,2 * 1,2 = 1,44 te vermijden. Als je bijvoorbeeld de lettergrootte van 1,2em in #content declareert, dan kan bij het aangeven van de lettergrootte van p alleen 1em zijn, niet 1,2em, omdat deze em niet die em is, en het wordt 1em=12px omdat het de lettertypehoogte van #content erft. REM-kenmerken rem is een nieuwe relatieve eenheid (root em) die aan CSS3 is toegevoegd en veel aandacht heeft getrokken. Wat is het verschil tussen deze unit en EM? Het verschil is dat wanneer je rem gebruikt om de lettergrootte van een element in te stellen, het nog steeds de relatieve grootte is, maar de relatieve alleen het HTML-wortelelement. Deze eenheid kan worden beschouwd als een combinatie van de voordelen van relatieve grootte en absolute grootte, waardoor het niet alleen het wortelelement kan aanpassen om alle lettergroottes proportioneel aan te passen, maar ook de kettingreactie van samengestelde lettergroottes laag voor laag kan vermijden. Momenteel wordt rem ondersteund in alle browsers behalve IE8 en eerder. Voor browsers die het niet ondersteunen, is het antwoord ook heel eenvoudig: een absolute eenheidsverklaring schrijven. Deze browsers negeren de lettergrootte die met rem is ingesteld. Hier is een voorbeeld: p {font-size:14px; lettergrootte: .875rem; } Notitie:De keuze van lettertypeunits is grotendeels aan je project, en als je gebruikersbasis de nieuwste versie van de browser gebruikt, wordt REM aanbevolen; als compatibiliteit een zorg is, gebruik dan px, of beide. Hier is het adres van een px, em, rem-eenheidsconversietool:http://pxtoem.com/
| 
Geplaatst op 21-03-2017 09:31:50
|
|
|
