我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

时代在不断的转变,目前的主流网页类型已经悄悄的变成了手机端的网页,网页里面的尺寸单位也从px慢慢的变成了rem。但是,对于开发人员来说,计算pxrem,那是非常痛苦的事情。弄不好还得给计算错误。那么对于移动端网页,如何更加优美地处理px转化rem的问题呢?这里,苏南大叔对比一下vscode下的几个相关插件,大家看自己需求选择安装即可。

苏南大叔:vscode编辑css文件,如何自动转换单位px到rem? - vscode-css
vscode编辑css文件,如何自动转换单位px到rem?(图12-1)

本文测试环境:macvscode@1.32.1

安装vscode插件的途径

安装vscode插件的途径很多,苏南大叔就列举一个最简单容易的途径。就是按左侧边栏中的最后一个按钮,然后输入关键词就可以了。可用的关键词是:px2rem或者rem。前者搜索出来的都是国人作品,后者基本上都是老外写的。如下图所示:

苏南大叔:vscode编辑css文件,如何自动转换单位px到rem? - vscode-plugins-search
vscode编辑css文件,如何自动转换单位px到rem?(图12-2)

经过不断的实验和对比,苏南大叔从搜索结果中保留了以下两个插件。分别是:px2rem+px to rem

注意事项

emmet abbreviation

特别说明的就是这些功能有可能会和emmet abbreviation提示功能冲突。那么,您可以选择在设置中关闭emmet提示功能。但是并不推荐这么操作,毕竟这个emmet功能还是非常有用的。

苏南大叔:vscode编辑css文件,如何自动转换单位px到rem? - disable_emmet_abbreviation
vscode编辑css文件,如何自动转换单位px到rem?(图12-3)

标准写法带空格

实际上,您只要在输入标准的css就可以正常使用pxrem插件了,区别就是冒号后面的空格。比如:

  • width:100px,这个时候激活的是emmet abbreviation
  • width: 100px,就可以正常使用pxrem插件了。

苏南大叔:vscode编辑css文件,如何自动转换单位px到rem? - 不同的提示语
vscode编辑css文件,如何自动转换单位px到rem?(图12-4)

基准值

这些rem转换类插件,都有个基本的前提设置,那就是基准字号默认是75。也就是说,默认的设计稿宽度为750px。也就是说,750px会等于10rem

如果您拿到的psd宽度并不是这个值,那么您也许需要修改基准值来确定一个准确的rem了。每个插件具体的名字,都是不一样的。一般不是在左下角的设置功能中,输入对应的插件名称,就可以找到类似设置了。

苏南大叔:vscode编辑css文件,如何自动转换单位px到rem? - setting-config-basewidth
vscode编辑css文件,如何自动转换单位px到rem?(图12-5)

but,这里有些问题。默认值也许并不是你需要的,所以,还是需要自行根据项目情况进行修改。

设置值保存位置

每个插件都有各自类似不同设置。所以,这些类似插件协同工作的话,要分别设置其基准值。而且,这些配置都有个user settingsworkspace settings两个概念。一般来说,这些设置最好修改的是workspace settings,这样的话,设置就是随着项目不同而不同了。

实际上编辑的文件是:

.vscode/setttings.json

具体设置的项目,随着插件的不同而不同。

苏南大叔:vscode编辑css文件,如何自动转换单位px到rem? - vscode-setting
vscode编辑css文件,如何自动转换单位px到rem?(图12-6)

px2rem+

苏南大叔:vscode编辑css文件,如何自动转换单位px到rem? - px2remplus
vscode编辑css文件,如何自动转换单位px到rem?(图12-7)

px2rem+的优点就是:有个右键菜单,比较方便一些。右键菜单可以设置基准值,还可以执行一键转化当前代码所有的值,功能比较实用。右键菜单里面的设置基准像素数,是根据不同的文件来设置的。每个文件都可以设置不同的基准,这个功能比较赞。

当然,它也是支持全局更改设置的。设置值是:px2rem-plus.base

苏南大叔:vscode编辑css文件,如何自动转换单位px到rem? - menu-basefont
vscode编辑css文件,如何自动转换单位px到rem?(图12-8)

用菜单的话,似乎是针对文件临时生效的。修改设置项目的话,是可以针对项目生效的。大家可以试试看。

苏南大叔:vscode编辑css文件,如何自动转换单位px到rem? - px2remplus-setting
vscode编辑css文件,如何自动转换单位px到rem?(图12-9)

更多介绍文字:

git源码位置:

px to rem

苏南大叔:vscode编辑css文件,如何自动转换单位px到rem? - pxtorem
vscode编辑css文件,如何自动转换单位px到rem?(图12-10)

这个插件名字叫做:px to rem。可以用alt+z快捷键,快速在选中的 pxrem之间进行切换。但是基准值是另外的设置,和其它的不通用。别的插件都是把px变成rem,这个插件是可以在pxrem直接快速切换。这个插件是否可以正常使用,还请保证基准值设置正确。设置值是:px-to-rem.px-per-rem

苏南大叔:vscode编辑css文件,如何自动转换单位px到rem? - pxtorem-setting
vscode编辑css文件,如何自动转换单位px到rem?(图12-11)

详细介绍文字见这里:

git源码位置:

协同工作

px to rem如果要是配合px2rem+使用的话,建议直接修改配置文件:

.vscode/setting.json

修改内容类似为:

newsn.net:这里是【评论】可见内容

保持这两个值一致即可,这样的话,这两个插件就可以协同工作了。这里,苏南大叔的选择是200。就是说750px等于3.75rem,并不是太好的选择。但是项目里面因为要和其他人协同,所以做的一个妥协。个人觉得100是最合适的,就移动个小数点,就可以了。很简单好算吧?

苏南大叔:vscode编辑css文件,如何自动转换单位px到rem? - plugins-settings
vscode编辑css文件,如何自动转换单位px到rem?(图12-12)

相关链接

总结

本文共涉及到了3个基础值,分别是:75,100,20075是插件里面默认自带的值,100是苏南大叔觉得不错的值,200是和别人的代码一起协同妥协后的值。您的这个值是什么呢?可以留言给苏南大叔作为交流。

类似功能的插件,在vscode的插件体系中,存在很多。那么,本文中,苏南大叔也就是根据自己的理解保留了两个插件而已。大家可以根据自己的喜好再次挑选。

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   css    vscode