In de websitebron heb ik soms ontwikkelaars de eenheid remzien gebruiken. Is het vergelijkbaar met em? Ik heb het geprobeerd om te zien wat het eigenlijk doet, maar waar is het relatief aan?
HTML
<div>Hello <p>World</p></div>
CSS
div {
font-size: 1.4rem;
}
div p {
font-size: 1.4rem;
}
Antwoord 1, autoriteit 100%
em‘s zijn relatief ten opzichte van de lettergrootte van hun ouders
rems zijn relatief ten opzichte van een basislettergrootte
Dit is belangrijk wanneer tussenliggende containers de lettergrootte wijzigen. Onderliggende elementen met EM’s worden beïnvloed, degenen die REM’s gebruiken niet.
Antwoord 2, autoriteit 25%
De eenheid rem(root em) staat voor de lettergrootte van het root-element. In een HTML-document is het root-element het html-element.
Antwoord 3, autoriteit 14%
Hoewel emrelatief is ten opzichte van de lettergrootte van het directe of dichtstbijzijnde bovenliggende element, is remalleen relatief ten opzichte van de html (root) lettergrootte.
emgeeft de mogelijkheid om een deel van een ontwerp te beheren. Zoals in, schaal het type in dat specifieke gebied relatief.
remgeeft de mogelijkheid om tekst gemakkelijk over de hele pagina te schalen.
Antwoord 4, autoriteit 10%
In principe is emrelatief aan de dichtstbijzijnde ouder in CSS, terwijl is remrelatief is aan de bovenliggende pagina van de pagina, meestal de html-tag…
Je ziet duidelijk het verschil als je de onderstaande CSS uitvoert en hoe de ouder dit doet:
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>Antwoord 5, autoriteit 4%
Samenvatting:
rem: eenCSS-eenheid die relatief is ten opzichte van de lettergrootte van hethtml-element.em: eenCSS-eenheid die relatief is ten opzichte van de lettergrootte van het ouderelement.
Voorbeeld:
.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>Antwoord 6, autoriteit 3%
Hier is een voorbeeld. divsformaat met remverandering als we de font-sizevan het htmlelement veranderen. Terwijl die met emalleen veranderen als we de font-sizevan de div’sveranderen.
$(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>Antwoord 7
In emrelatieve eenheid wordt de lettergrootte gemeten op basis van dichtstbijzijnde bovenliggende lettergroottemaar als de lettergrootte voor geen van de bovenliggende elementen is gedefinieerd, dan is dit standaard lettergrootte wordt gedefinieerd volgens het root html-element
De relatieve rem-eenheid wordt alleen berekend door root html-element, dus de lettergrootte van het bovenliggende element heeft hier geen invloed op
Antwoord 8
Een paar voorbeelden van CSS om te laten zien hoe remzal werken, merk op dat de lettergrootte rootis ingesteld met pxvia html tag
html, body { font-size: 16px; }
div { font-size: 18px; }
p { font-size: 1rem; }
En de bijbehorende HTML:
<div>
<p>Lorem Ipsum</p>
</div>
Omdat de tag <p>is ingesteld op 1rem, negeert deze de lettergrootte van de bovenliggende div’svan 18px. Als we echter in plaats daarvan de lettergrootte instellen op 1em, zou de alinea de 18pxlettergrootte van het bovenliggende element erven. Ik weet dat dit voorbeeld niet bijzonder nuttig is, maar hopelijk kan het helpen om het verschil tussen emen remte illustreren.
9
CSS-meeteenheden: EM , REM Zowel ten opzichte van de voorste grootte van hun ouders. De grootte zal veranderen afhankelijk van de lettergrootte van de ouders.
Voorbeeld:
REM : 100% van het root-element lettergrootte.
Em : 100% van de bovenliggende lettergrootte.
10
EM is ten opzichte van de lettergrootte van zijn directe of dichtstbijzijnde ouder en REM is alleen ten opzichte van de HTML (root) -fontformaat.
11
Het belangrijkste probleem komt in gebruik van de ’em’ en ‘rem’ wanneer er een ouderlettergrootte is ….
** Hier is het voorbeeld:
Stel dat ik de lettergrootte van 2em voor het lichaam van mijn website wil, dus we nemen 2 Mont-formaat in het lichaam die bekend staat als ouderlettergrootte …
En nogmaals voor mijn H1 Ik wil een grootte van 5.6 iets en nadat we opslaan en naar onze website gaan en vernieuwen, zullen we opmerken dat onze H1 nu meer dan 5.6 is geworden.
Dit gebeurt omdat de lettertypen worden geërfd en toegevoegd bovenop wat het van zijn ouder is gekregen …. (deze problemen worden gebeurd wanneer we EM en percentages gebruiken)
Dus, om uit dit soort problemen te komen, gebruiken de programmeurs REM.