zoukankan      html  css  js  c++  java
  • 详解: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方能生效。

  • 相关阅读:
    为什么选择webpack
    webpack-模块(module)
    AHK 命令行
    icon 多 索引 图标
    win10 鼠标右键 某类文件 资源管理器 卡死
    管道 命令 %errorlevel! 环境变量 优先级 问题 随笔 CMD /V 延迟的环境变量
    SolidWorks 管道 routing
    SolidWorks 工程图 表格 杂
    windows shell 笔记 3
    windows shell 笔记 2
  • 原文地址:https://www.cnblogs.com/ldq678/p/13424090.html
Copyright © 2011-2022 走看看