cssrem转换工具_详解：cssrem插件 -- VS Code px转rem神器

在移动端开发时，我们常常要使用rem适配页面元素大小。那么如何把px转为rem单位就是必做的换算。我们有2种方式快速的解决这个问题：

1.使用less，因为less支持变量和运算。

2.使用VS Code的第三方插件：cssrem，它能自动帮我们把px为单位的数据，转换成rem单位的数据

接下来就介绍下该插件的使用方法。

一、安装

与安装其他插件没有差别，只需要打开VS Code的扩展窗口，然后在搜索框中输入cssrem，回车，即可搜索到该插件，安装之。如下图所示：

二、使用

如果是低版本的VS Code，你需要重启下VS Code编辑器，高版本的不需要。

接下来，在任何样式文件中，只要输入带有px单位的数据，都会出现单位转换的只能提示框。如下图所示：

使用非常简单。

三、修改默认的html的font-size大小

同使用，我们发现这里的转换系数，也就是html的font-size默认是16px。假如我们的项目，其适配方案不是这样的，你会发现，无论你如何在css中设置html的font-size属性值，也不起作用，这是因为cssrem插件在安装时有一个配置参数，我们不管开发什么项目，开发任何页面，在使用该插件进行px→rem转换的时候，都是以这个配置的数据作为转换的系数标准的，而不是你当前页面的html的font-size大小为依据的。所以就需要修改插件默认的html的font-size。接下来我们就来说说如何修改这个默认的font-size。

修改这个值有2种操作方法。先来看第一种。

方法一、代码化的修改方式.

这个值是需要在VS Code的settings.json文件中修改的。所以第一步是打开此文件。方法非常简单：

首先使用快捷键 ctrl + shift + p打开命令搜索面板。你也可以通过鼠标，手动打开，操作步骤如下图：

然后，在打开的命令搜索面板中，输入settings。并在下拉备选框中，选择“首选项：打开设置(json)"。如下图所示：

这样你就打开了settings.json文件，大概就是下图所示的样子：

接下来，我们需要往该配置文件中写一些代码，来修改cssrem默认的字号。当然，你可以在这里直接手敲代码，但是，朕记不住啊。。。

没关系，我们可以复制粘贴。跟我来做。

仍然是通过点击VS Code左下角的齿轮图标，选择”设置“。如下图所示：

此时，你会看到设置窗口。你需要在设置窗口的搜索框中输入cssroot，点回车会有一个匹配项。请按下图操作

把鼠标移动到搜索出来的这一项上，就会有一个小齿轮图标显示(鼠标不移动到这一个匹配项上是不会显示此齿轮的)。

鼠标左键点击该齿轮图标，会显示一个菜单，选择“将设置复制为JSON文本”。

现在，你就把需要在settings.json里配置的cssrem插件的html字号大小的代码复制过来了。

最后，再回到settings.json文件中，在最后一行，使用ctrl + v把上一步复制的代码粘贴进来。如下图所示，并把字号的值设定为你项目所需要的值。比如这里是75px，那么就写75。

注意：这里不要带px。

到这里，插件就配置完毕了。现在必须重启VS Code。当我们再次打开项目，输入带有px单位的数据时，就能按照75的系数来转换对应的rem值了。如下图所示：

方法二、图形界面下修改方法

仍然是先通过VS Code左下角的齿轮状“管理”按钮，打开设置窗口。

然后在设置窗口下，通过“用户”标签，找到“扩展”选项，把此选项展开，找到“cssrem”，鼠标左键点击此项，在右边的属性窗口中找到Root Font Size属性，在其文本框中输入你想要的字号就行了。如图所示：

方法三、最简单的做法

以上方法都太复杂了，最后是推荐做法，也是最简单的做法。不多说了，直接看图：

修改完了root font size的值，必须重启VS Code方能生效。