मिश्रण के लिए रेम फ़ॉन्ट आकार - सीएसएस-ट्रिक्स

remFont-size इकाई के समान है em, बजाय केवल व्यापक यह हमेशा जड़ (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); )

(धन्यवाद गेबे लुएथजे)

कार्ल मार्कली द्वारा एक अलग दृष्टिकोण के साथ एक और SCSS:

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