移动开发适配，px转vm总结

一.问题

如图：如果使用px做为单位时，字体“注册bilibili页面”并不会跟着页面大小变化而变化，那么我们要做到字体大小等根据窗体自适应，则可以使用rem,vm等单位。

二.解决办法

我选择使用vm作为单位

公式： px / 设计稿(宽/高) *100 = vm

如果每个px都要自己去计算一遍太麻烦了，vscode中提供了一些转换插件帮助我们自动计算，vm单位的转换插件可以用

px-to-vm。

 具体用法如下：

  1.安装px-to-vm插件

      如图：在商城中搜索px-to-vm 并点击安装

      

2.设置设计稿的宽度

     在商城的已安装插件中，找到px-to-vm，选中并点击左下角设置图标，如图：

      

      选中设置后，右边出现下图所示，在输入框中输入px-to...，会自动搜索出vm配置信息；若设计稿宽度为375px；

则将箭头所指位置改为375px;然后保存。

       

 

   3.选中对应行如：“font-size:16px”,按住alt+z,则将px单位值自动换算为vm单位值

         选中 ——>  alt + z   ——>  

     此时保存，重新刷新页面发现，刚刚不适配的情况解决啦