Μίξεν για μέγεθος γραμματοσειράς Rem - CSS-Κόλπα

Anonim

Η remμονάδα μεγέθους γραμματοσειράς είναι παρόμοια με αυτήν em, μόνο αντί να εναλλάσσεται σε σχέση με το στοιχείο root (html) (περισσότερες πληροφορίες). Αυτό έχει αρκετά καλή σύγχρονη υποστήριξη προγράμματος περιήγησης, είναι μόνο το IE 8 και κάτω πρέπει να παρέχουμε pxεναλλακτικά.

Αντί να επαναλαμβάνουμε τον εαυτό μας παντού, μπορούμε να χρησιμοποιήσουμε ένα μείγμα LESS ή SASS για να το διατηρήσουμε καθαρό. Αυτές οι συνδυασμοί προϋποθέτουν:

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

(Ευχαριστώ Gabe Luethje)

Ένα άλλο SCSS με διαφορετική προσέγγιση από τον 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; )

Έτσι μπορείτε να κάνετε:

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

και παρε:

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