好用的px转rem插件推荐

在响应式布局中，rem这个css单位已经慢慢崭露头角，成为最佳解决方案之一。然而在固定布局时我们通常以px为基准单位进行调整，进而通过计算获取rem的值，这时如果有个好用的px转rem工具会让工作事半功倍。本文将推荐一些常用开发工具的px转rem插件

VSCode插件

1、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等文件格式或自定义文件

2、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插件

1、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取消转换