原理

根据rem的特性，即所有数值根据一个基准值去设置，当基准值改动的时候，数值即跟随变大变小。

问题点

放到具体实现我们要解决两个问题：

• 如何设置基准值；
• 如何根据设计图，去设置各个数值；

如何设置基准值

我们要清楚这个基准值是随着屏幕大小改动而要进行改动的，所以显而易见我们有两种选择：

• 媒体查询；
• vw；

媒体查询很简单，根据要适配的设备范围对某些点上进行设置例如：

@media screen and (min-width: 320px) {
  html {
    font-size: 21.33333px; }
 }

@media screen and (min-width: 360px) {
  html {
    font-size: 24px; }
  }

@media screen and (min-width: 375px) {
  html {
    font-size: 25px; }
 }

vw是一个新的单位根据的就是屏幕宽度来定的所以对于不同的屏幕我们只要设置一次即可

 html {font-size: 6.66667vw ; } 

从显示效果上来说vw肯定是最好的，由于媒体查询是我们一个个去设置的难免有一些奇怪的宽度没有兼顾到，就会出现于设计稿有些出入的问题。当然只要我们设置细致这个问题倒是不大。但是，vw却又兼容性问题，所以最好的方案是两者结合，最后提升vw优先级，这样一来可以用vw的就可以使用，不能的话也能用媒体查询替代。

css的设置方案我们想好了，那具体的值应该怎么算呢？

首先我们要定义一个基础值（在设计稿上），假设我们的设计稿是750px的宽度，并且字体大小默认值为30px，那我们将30px作为750px时的基础，那我们将的得到一个倍率，750/30 = 25。即基准值与屏幕大小之间的关系，故在媒体查询的时候就可以利用这个去设置基准值在scss中如下：

$screen: (320px, 360px, 375px, 384px,393px,400px,412px, 414px, 424px, 480px, 540px, 640px, 720px, 750px);
$baserem: 25;
@each $size in $screen {
    @media screen and (min-width: $size) {
        $Calc_Html: $size/$baserem;
        $Calc_Body: $Calc_Html*0.48;

        html {
            font-size: $Calc_Html;
        }

        body {
            @if $Calc_Body >12 {
                font-size: $Calc_Body;
            }
            @else {
                font-size: 12px;
            }
        }
    }
}

接着设置vw：

@media screen and (min-width:320px) and (max-width: 750px) {
    html {
        font-size: (100/$baserem) *1vw !important;
    }
}

接着就简单了，如何根据基础值去设置其他数值，从设计稿中读出数据后与30对比并设置就好了，比如一个div宽度为20高度为30，那么最终设置为宽（20/30）0.66rem，高（30/30）1rem。我们可以在scss中设置计算函数使用的时候就方便了：

$desinWidth: 750;
$baserem: 25;
$baseFontSize: ($desinWidth/$baserem);
@function rem($px) {
    @return $px / $baseFontSize * 1rem;
}

使用：

div{
    width: rem(20);
    height: rem(30);
}