Mixinuri pentru dimensionarea fonturilor Rem - CSS-Tricks

Unitatea remde dimensiune a fontului este similară em, doar că în loc să fie în cascadă este întotdeauna relativă la elementul rădăcină (html) (mai multe informații). Acest lucru are un suport de browser modern destul de bun, este doar IE 8 și în jos, pentru care trebuie să oferim pxalternative.

În loc să ne repetăm ​​peste tot, putem folosi un mixer LESS sau SASS pentru a-l menține curat. Aceste mixini presupun:

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; )

Utilizare

p ( .font-size(13); )

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

(Mulțumesc Gabe Luethje)

Un alt SCSS cu o abordare diferită de Karl Merkli:

@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; )

Deci, puteți face:

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

si ia:

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