Question

我检查了以下article，其中提出了以下混合：

rem字体大小与像素回退

@function calculateRem($size) {
  $remSize: $size / 16px;
  @return $remSize * 1rem;
}

@mixin font-size($size) {
  font-size: $size;
  font-size: calculateRem($size);
}

在h {font-size: 62.5%放置1rem = 10pixels之后，我觉得在我的项目中使用rem非常舒服。

但我想知道是否有混合或方法为整个项目中使用的任何rem创建像素回退，例如：

&:before{
    color: white;
    margin: 0 0.5rem 0 0;
    left: 0;
    text-align: center;
    top: 0;
    width: 3.2rem;
}

在这种情况下，margin-right = 5pixels，宽度为32pixels。 rem单元的问题是不支持IE8，Opera mini或Safari 3.2。因此，无法从这些浏览器中正确显示该网站。

有没有办法在整个项目中使用rem自动执行像素回退？

Answer 1

这是一个解决方案，因此您可以将rem用于px mixin以获取任何属性：

html {
  font-size: 62.5%;
}

@function calculateRem($size) {
  $remSize: $size / 10px;
  @return #{$remSize}rem;
}

@mixin rem($propertie, $value) {
  #{$propertie}: $value;
  #{$propertie}: calculateRem($value);
}

p {
  font-size: calculateRem(32px);
  @include rem(width, 100px);
  @include rem(margin, 50px);
}

<强>输出

html {
  font-size: 62.5%;
}

p {
  font-size: 3.2rem;
  width: 100px; /* Fallback */
  width: 10rem;
  margin: 50px; /* FallBack */
  margin: 5rem;
}

示例：http://sassmeister.com/gist/e888e641925002b5895c

Answer 2

此解决方案将与包含混合值的快捷方式属性一起使用。

// Global Var
$root-font-size: 16;

@mixin rem($property, $values) {
  $pxvalues: null;
  $remvalues: null;

  @each $value in $values{
    $pxvalue: null;
    $remvalue: null;
    @if type-of($value) == 'number'{
      @if ($value > 0 or $value < 0){
        $pxvalue: ($value)+px;
        $remvalue: ($value / $root-font-size)+rem;
      } @else {
        $pxvalue: $value;
        $remvalue: $value;
      }
    } @else {
      $pxvalue: $value;
      $remvalue: $value;
    }

    $pxvalues: append($pxvalues, $pxvalue);
    $remvalues: append($remvalues, $remvalue);

  }

  #{$property}: $pxvalues;
  #{$property}: $remvalues;
}

// Usage: pass pixel values without units
.foo{
  @include rem(margin, 80 auto);
}

输出：

.foo{
  margin: 80px auto;
  margin: 5rem auto;
}

在整个项目中使用REM单元自动执行像素回退

2 个答案: