Scss基础——rem与px的自动转换

在CSS中，实现px和rem转换非常简单，但每次使用都需进行计算。虽然在html中设置font-size:62.5%即16px*62.5%=10px;会给大家带来便利，但终究有些烦人，也不是长远之计。另外，Google浏览器中文默认字体大小为12px。既然我们学习了Scss，就应该思考如何让Scss来帮助我们做这些计算的工作。接下来介绍如何使用Scss实现px和rem之间的计算。

$browser-default-font-size: 16px !default;//变量的值可以根据自己需求定义

html { font-size: $browser-default-font-size;}

@function pxTorem($px){

    //$px为需要转换的字号

    @return ($px/100)+rem;

}

 

//SCSS

.header {

font-size: pxTorem(12);}