Som moff skrev; font endrer du størrelse på ved å bruke EM istedetfor PX. Det er også andre måter å definere det på, men la oss holde oss til den enkleste først. EM er relativ til arvet font-størrelse.
Eksempel:
Kode
body {
font-size: 20px;
}
h1 {
font-size: 5em; // Denne er nå 100px. (20px*5em)
}
h2 {
font-size: 2.3em; // Denne er nå 46px. (20px*2.3em)
}
@media (max-width: 640px) {
body {
font-size: 10px; // h1 vil nå være 50px (10px*5em), h2 vil være 23px (10px*2.3em)
}
}
Du MÅ ikke definere font-størrelsen på body-elementet. Du kan f.eks. ha to DIV'er med forskjellig font-størrelse definert i PX, og da vil de underelementene definert med EM ha størrelse relativ til DIV'en de ligger under.
F.eks.
Kode
div.test1 {
font-size: 10px;
}
div.test2 {
font-size: 5px;
}
h1 {
font-size: 2em;
}
....
<div class="test1">
<h1>Test 1</h1> <!-- Denne vil ha font-størrelse 20px (10px*2em) -->
</div>
<div class="test2">
<h1>Test 2</h1> <!-- Denne vil ha font-størrelse 10px (5px*2em) -->
</div>
Det du sørger for ved å bruke EM er at størrelsesforholdet mellom de ulike tekstelementene forblir den samme, og at man slipper å skrive om annet enn de elementene det arves fra i @media.
Sist endret av nso; 1. mars 2017 kl. 22:09.