Јединица remвеличине фонта је слична em, али уместо да се каскадно увек односи на основни (хтмл) елемент (више информација). Ово има прилично добру подршку за савремени прегледач, то је само ИЕ 8 и pxстарије верзије, за које морамо да обезбедимо резервне копије.
Уместо да се понављамо свуда, можемо да користимо МАЊЕ или САСС мешавине како би одржали чистоћу. Ови миксини претпостављају:
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; )Употреба
p ( .font-size(13); )p ( @include font-size(13); )(Хвала Габе Луетхје)
Још један СЦСС са другачијим приступом Карла Мерклија:
@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; )Дакле, можете учинити:
@include rem-fallback(margin, 10, 20, 30, 40);и добити:
body ( margin: 160px 320px 480px 640px; margin: 10rem 20rem 30rem 40rem; )
