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;
}