px2rem, px转rem的常用方法

方法一、 sass或者less

@function px2rem($n) {
    @return ($n * 20 / 750) * 1rem; //设计稿一般都是750宽,20等分即1rem=37.5px， 也可以10等分@return ($n * 10 / 750) * 1rem;
}
.demo2{ 
    width: px2rem(750); 
    height: px2rem(750); 
    background: blue; 
}

或者是

@function px2rem($n) {
    @return ($n * 10 / 750) * 1rem; //设计稿一般都是750宽,10等分即1rem=75px
}
.demo2{ 
    width: px2rem(750); 
    height: px2rem(750); 
    background: blue; 
}

此时编译sass问价时，会自动转换成rem。

================================================================================

方法二、 vscode编译器里，使用cssrem插件，或者px to rem 插件

安装成功之后，需要对插件进行root font size基准单位配置。

可以配置成37.5或者是75 （37.5的意思是将750平均分成20等分1rem=37.5px， 75的意思是将750平均分成10等分 1rem=75px。）

无论是20等分还是10等分，只要前后都保持一致就可以了。

 

 此时，在编译器中输入

.demo{ 
    width:100px; 
    height:100px; 
    background: pink;
}

点一下px2rem会自动转换成如下代码

.demo{ 
    width:2.666667rem; 
    height:2.666667rem; 
    background: pink;
}