好用的px轉rem插件推薦

在響應式佈局中，rem這個css單位已經慢慢嶄露頭角，成爲最佳解決方案之一。然而在固定佈局時咱們一般以px爲基準單位進行調整，進而經過計算獲取rem的值，這時若是有個好用的px轉rem工具會讓工做事半功倍。本文將推薦一些經常使用開發工具的px轉rem插件

VSCode插件

一、cssrem

安裝

快捷鍵ctrl+p打開轉到文件搜索框，輸入命令：ext install cssrem

配置

參數配置文件：VSCode -> 文件 -> 設置 -> 搜索cssrem

• cssrem.rootFontSize root font-size (unit: px), default: 16
• cssrem.fixedDigits px轉rem小數點最大長度，默認：6。
• cssrem.autoRemovePrefixZero 自動移除0開頭的前綴，默認：true

該插件能夠在輸入時選擇轉換，也能夠使用ctrl+p，ctrl+r快捷鍵轉換，支持html vue css less scss sass等文件格式或自定義文件

二、px to rem

安裝

快捷鍵ctrl+p打開轉到文件搜索框，輸入命令：ext install px-to-rem

配置

參數配置文件：VSCode -> 文件 -> 設置 -> 搜索px to rem

• px-to-rem.px-per-rem: number of pixels per rem. Default is 16px.
• px-to-rem.number-of-decimals-digits: 最多保留的小數位
• px-to-rem.only-change-first-ocurrence: 轉換所有或只轉換當前選擇的
• px-to-rem.notify-if-no-changes: 啓用/關閉通知

選中要轉換的值，使用快捷鍵Alt+z執行px轉rem或rem轉px

Sublime Text插件

一、cssrem插件

安裝

下載本項目，好比：git clone https://github.com/flashlizi/cssrem
進入packages目錄：Sublime Text -> Preferences -> Browse Packages...
複製下載的cssrem目錄到剛纔的packges目錄裏。
重啓Sublime Text。

配置

參數配置文件：Sublime Text -> Preferences -> Package Settings -> cssrem

• px_to_rem - px轉rem的單位比例，默認爲40。
• max_rem_fraction_length - px轉rem的小數部分的最大長度。默認爲6。
• available_file_types - 啓用此插件的文件類型。默認爲：[".css", ".less", ".sass"]。

輸入px值後按下Enter鍵直接轉換，使用Ctrl+z取消轉換