在整个项目中使用REM单元自动执行像素后退 [英] Automate pixel fallback using REM units throughout a project

问题描述

我检查了以下文章在其中提出了以下混合:

I checked the following article in which it presented the following mixing:

具有像素后退功能的rem字体大小

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

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

在将font-size: 62.5%放置在html上后，我在项目中使用rem感到非常自在，因此1rem = 10pixels.

I feel very confortable using rem on my projects, after placing font-size: 62.5% on the html so 1rem = 10pixels.

但是我想知道是否存在用于为整个项目中使用的任何rem创建像素后备的混合或方法，例如:

But I would like to know if there is a mixing or a method to create a pixel fallback for any rem used in a whole project, as for example:

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

在这种情况下，margin-right = 5像素，宽度32像素. rem单元的问题是不支持IE8，Opera mini或Safari 3.2.因此，从任何这些浏览器中都无法正确看到该网站.

In this case the margin-right = 5pixels and width 32pixels. The issue with rem units is that IE8, Opera mini or Safari 3.2 is not supported. So the site would not be correctly visible from any of these browsers.

是否有一种方法可以在整个项目中使用rem自动执行像素后退?

Is there a way to automate the pixel fallback using rem throughout a project?

推荐答案

以下是一种解决方案，因此您可以使用rem到px mixin的任何属性:

Here is a solution so you can use the rem to px mixin for any property:

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

这篇关于在整个项目中使用REM单元自动执行像素后退的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！