Miksi Rem fonta lielumam - CSS-triki

Anonim

remFont-size vienība ir līdzīgs em, tikai nevis kaskādes tas vienmēr attiecībā pret saknes (html) elementu (vairāk informācijas). Tam ir diezgan labs mūsdienu pārlūka atbalsts, tas ir tikai IE 8, un mums ir jānodrošina pxatkāpšanās.

Tā vietā, lai visur atkārtotos, mēs varam izmantot LESS vai SASS maisījumus, lai uzturētu to tīru. Šie maisījumi pieņem:

html ( font-size: 62.5%; /* Sets up the Base 10 stuff */ )
.font-size(@sizeValue) ( @remValue: @sizeValue; @pxValue: (@sizeValue * 10); font-size: ~"@(pxValue)px"; font-size: ~"@(remValue)rem"; )
@mixin font-size($sizeValue: 1.6) ( font-size: ($sizeValue * 10) + px; font-size: $sizeValue + rem; )

Lietošana

p ( .font-size(13); )
p ( @include font-size(13); )

(Paldies Gabe Luethje)

Vēl viena SCSS ar citu Karla Merkli pieeju:

@function strip-unit($num) ( @return $num / ($num * 0 + 1); ) @mixin rem-fallback($property, $values… ) ( $max: length($values); $pxValues: ''; $remValues: ''; @for $i from 1 through $max ( $value: strip-unit(nth($values, $i)); $pxValues: #($pxValues + $value*16)px; @if $i < $max ( $pxValues: #($pxValues + " "); ) ) @for $i from 1 through $max ( $value: strip-unit(nth($values, $i)); $remValues: #($remValues + $value)rem; @if $i < $max ( $remValues: #($remValues + " "); ) ) #($property): $pxValues; #($property): $remValues; )

Tātad jūs varat darīt:

@include rem-fallback(margin, 10, 20, 30, 40);

un iegūstiet:

body ( margin: 160px 320px 480px 640px; margin: 10rem 20rem 30rem 40rem; )