VSCode中使用cssrem插件

使用rem做移動端適配時,我們需要將px值轉換爲對應的rem,在VSCode中,提供一款插件cssrem,可以幫助我們快速換算。

1、在【擴展】中,搜索【cssrem】,【安裝】

2、安裝完成後,重新加載,插件就生效了

3、我們在頁面中,仍然寫px,會直接提示對應的rem值

4、cssrem相關屬性

在VSCode中,點擊左下角的設置,找到cssrem的三個屬性

cssrem.rootFontSize: 根字體大小,默認是16px,即1rem = 16px,可自定義,在上圖的示例中,我已經把根字體大小改成了10px,所以轉換的時候是20px=2rem

cssrem.fixedDigits: px轉rem小數點最大長度,默認爲6

cssrem.autoRemovePrefixZero:自動移除0開頭的前綴,默認:true

這些配置項都可以自定義,但是更改後需要重啓VSCode纔可以生效!!!

 

 

rem是基於根節點的font-size的值計算的,根節點的font-size默認是16px,這個值可以修改,修改根節點font-size的方法如下

注意區分,輸進去插件配置項的那個數字只是計算標準,你改了插件的fontsize也要讓html的保持一致。要不然,你html根字體設20px,插件裏10px,你在程序裏寫20px,會提示轉換成2rem,但是你在頁面上看到的就是2*20=40px,並不是20px!!!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章