På responsive websites er tekststørrelsen ofte lidt et smertensbarn. Billeder kan automatisk resizes, så de hele tiden passer til skærmens størrelse, mens tekststørrelser via media queries ændres i ‘ryk’, så f.eks. overskrifterne på mobilskærme er 36px, på tablets 48px og på store skærme er 60px. Det er ikke altid lige kønt, men det er heller ikke til at arbejde med, hvis der skal bruges alt for mange breakpoints.
Med Sass kan det dog lade sig gøre ændre skriftstørrelsen dynamisk.
Først laves en funktion, her kaldet ‘between’:
@function between($from, $to, $fromWidth, $toWidth) {
$slope: ($to - $from) / ($toWidth - $fromWidth);
$base: $from - $slope * $fromWidth;
@return calc(#{$base} + #{100vw * $slope});
}
Dernæst defineres de ønskede breakpoints, f.eks.:
$smallscreen: 380px;
$largescreen: 1100px;
og herefter kan vi definere skalerbare skriftstørrelser, i dette tilfælde for h1:
h1 {
font-size: 24px;
@media (min-width: $smallscreen) {
font-size: between(36px, 96px, $smallscreen, $largescreen);
}
@media (min-width: $largescreen) {
font-size: 96px;
}
Skriftstørrelsen bliver dynamisk, når skærmstørrelsen er mellem to breakpoints.
- Skærm mindre end 380px bred => skriftstørrelse: 24px
- Skærm mellem 380px og 1100px bred => skriftstørrelsen er mellem 36px og 96px, afhængig af skærmens bredde
- Skærm over 1100px bred => skriftstørrelse: 96px.
OBS! Skriftstørrelsen skal angives i pixels, ikke i em eller rem.
Funktionen ‘between’ og brugen af den er beskrevet grundigt hos CSS Tricks og kan selvfølgelig bruges til meget andet end skriftstørrelser – det er dog et overskueligt sted at starte, og noget vi har savnet.