时代在不断的转变,目前的主流网页类型已经悄悄的变成了手机端的网页,网页里面的尺寸单位也从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

相关链接

总结

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

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

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接作者。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

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

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

本站的忠实读者小伙伴,正在阅读下面这些文章: