Nella fonte del sito Web, a volte ho visto sviluppatori utilizzare l' remunità. È simile a em? L'ho provato per vedere cosa fa effettivamente, ma a cosa è relativo?
HTML
<div>Hello <p>World</p></div>
CSS
div {
font-size: 1.4rem;
}
div p {
font-size: 1.4rem;
}
Risposte:
EMsono relativi alla dimensione del carattere del genitore
REMsono relativi a una dimensione del carattere di base
Questo è importante quando i contenitori intermedi cambiano le dimensioni dei caratteri. Gli elementi figli con EM saranno influenzati, quelli che usano REM no.
L'unitàrem (root em) sta per la dimensione del carattere dell'elemento root. In un documento HTML, l'elemento radice è l' htmlelemento. Il supporto del browser è ancora limitato.
Mentre em è relativo alla dimensione del carattere del suo genitore diretto o più vicino, rem è solo relativo alla dimensione del carattere html (root).
em dà la capacità di controllare un'area di un disegno. Ad esempio, ridimensiona relativamente il tipo in quella specifica area. rem offre la possibilità di ridimensionare facilmente il testo su tutta la pagina.
Ecco un esempio. divsdimensionato con il remcambiamento mentre cambiamo font-sizel' htmlelemento. Mentre quelli dimensionati emcambiano solo quando cambiamo il font-sizedi div.
$(function() {
var htmlSize = $('input#html');
htmlSize.change(function() {
$('html').css('font-size', htmlSize.val() + 'px');
});
var divSize = $('input#div');
divSize.change(function() {
$('div').css('font-size', divSize.val() + 'px');
});
});* {
float: left;
font-size: 20px;
margin:2px;
}
label {
clear:both;
}
div {
border: thin solid black;
}
div.rem1 {
width:4rem;
height: 4rem;
clear: both;
}
div.rem2 {
width: 3rem;
height: 3rem;
}
div.em1 {
width: 4em;
height: 4em;
clear: both;
}
div.em2 {
width: 3em;
height: 3em;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Change html font-size
<input id="html" type='number' value="20" min="18" max="30" />
</label>
<div class="rem rem1">rem</div>
<div class="rem rem2">rem</div>
<label>Change div font-size
<input id="div" type='number' value="20" min="18" max="30" />
</label>
<div class="em em1">em</div>
<div class="em em2">em</div>Fondamentalmente em è relativo al genitore più vicino in CSS, mentre rem è relativo al genitore della pagina che di solito è il tag html ...
Puoi vedere chiaramente la differenza se esegui il CSS di seguito e come il genitore lo sta effettuando:
html {
font-size: 16px;
}
.lg-font {
font-size: 30px;
}
p.rem {
font-size: 1rem;
}
p.em {
font-size: 1em;
}<div class="lg-font">
<p class="em">Hello World - em</p>
</div>
<div class="lg-font">
<p class="rem">Hello World - rem</p>
</div>rem: CSSun'unità relativa alla dimensione del carattere htmldell'elemento.em: CSSun'unità relativa alla dimensione del carattere dell'elemento genitore .Esempio:
.element {
width: 10rem;
height: 10rem;
background-color: green;
font-size: 5px;
}
.innerElement {
width: 10em;
height: 10em;
background-color: blue;
}<div class="element">
<div class="innerElement"></div>
</div>Nell'esempio sopra il quadrato verde è 160 px per 160 px (a meno che tu non abbia l'impostazione predefinita del browser su 16px). Questo perché il browser predefinito htmldell'elemento font-sizeè 16pxe 10rem* 16px= 160.
La piazza interna è 10emgrande. Perché il suo elemento genitore è 5pxil quadrato è 5em * 10px = 50px.
Impostando tutte le unità per remavere i seguenti vantaggi:
remverranno ridimensionati di conseguenza.16pxnostra applicazione verrà ridimensionata con la dimensione del carattere selezionata dell'utente.rem, em e px sono diverse unità di dimensione del carattere in css.
em Un em è uguale alla dimensione del carattere calcolata del genitore di quell'elemento. ex: elemento div definito con font-size: 16px, i suoi figli 1em = 16px.
rem I valori rem sono relativi all'elemento html radice. es: se la dimensione del carattere dell'elemento radice è 16px, 1 rem = 16px per tutti gli elementi.
Riferimento: https://medium.com/code-better/css-units-for-font-size-px-em-rem-79f7e592bb97
https://stackoverflow.com/a/13941345/9093112 - è la migliore risposta ma voglio solo aggiungere
Default browser size is 16px = 1em = 1 rem
em e rem sono unità relative basate sui caratteri ed è diverso usare ems per i caratteri o per la lunghezza, quindi sia ems che rems sono basati sui caratteri ma la differenza tra loro è che ems usa l' elemento genitore o corrente come riferimento mentre rems usa la dimensione del carattere di root come riferimento.
Se vogliamo usare ems per le dimensioni dei caratteri, il riferimento è semplicemente la dimensione dei caratteri calcolata dai genitori simile a ciò che accade con le percentuali.
Nell'esempio seguente, una dimensione del carattere di tre em sull'elemento figlio dell'intestazione produce 72 pixel semplicemente perché è tre volte la dimensione del carattere principale che è (150/100) * 16 = 24px. Per quanto riguarda la lunghezza, è solo un po 'diverso. Il riempimento 2em sull'intestazione, poiché è una misura della lunghezza, utilizza la dimensione del carattere dell'elemento corrente come riferimento e sappiamo già che è di 24 pixel, quindi 2em risulterà in un riempimento di 48 pixel, capito? È una differenza sottile, ma importante. Quando usi em, se è per i caratteri, il riferimento è il genitore e per la lunghezza, il riferimento è l'elemento corrente.
html,body{
font-size:16px;
width:80vw;
}
header{
font-size:150%;
padding 2em;
margin-bottom:10rem;
height:90vh;
widht 1000px;
}
header-child{
font-size:3em;
padding:10%;
}
Riguardo al rem, in realtà funziona allo stesso modo sia per le dimensioni che per le lunghezze dei caratteri perché utilizza sempre la dimensione del carattere principale come riferimento. Ciò significa che il riempimento di 10 rem che abbiamo qui risulterà in 160 pixel perché la dimensione del carattere radice è 16.
Nell'unità relativa em la dimensione del carattereèmisurata sulla base della dimensione del carattere genitore più vicino ma se la dimensione del carattere nonèdefinita per nessuno degli elementi padre allora per impostazione predefinita la dimensione del carattere saràdeterminata in base all'elemento html radice
L' unità relativa rem è calcolata solo dall'elemento html radice , quindi la dimensione del carattere dell'elemento genitore non lo influenza
Unità di misura CSS: em , rem entrambi relativi alla dimensione frontale dei genitori. La dimensione cambierà a seconda della dimensione del carattere dei genitori. Esempio:
rem : 100% della dimensione del carattere dell'elemento radice.
em : 100% della dimensione del carattere principale.