移动端适配rem和vw

rem适配

放头部，

文字基准：font-size:75px

rem并不适合用到段落文本上。所以在Flexible整个适配方案中，考虑文本还是使用px作为单位。只不过使用[data-dpr]属性来区分不同dpr下的文本字号大小。

div {

    width: 1rem;

    height: 0.4rem;

    font-size: 12px; // 默认写上dpr为1的fontSize

}

[data-dpr="2"] div {

    font-size: 24px;

}

[data-dpr="3"] div {

    font-size: 36px;

}

为了能更好的利于开发，在实际开发中，我们可以定制一个font-dpr()这样的Sass混合宏：

@mixin font-dpr($font-size){

    font-size: $font-size;

    [data-dpr="2"] & {

        font-size: $font-size * 2;

    }

    [data-dpr="3"] & {

        font-size: $font-size * 3;

    }

}

有了这样的混合宏之后，在开发中可以直接这样使用：

@include font-dpr(16px);