详解: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方能生效。

原文地址:https://www.cnblogs.com/ldq678/p/13424090.html