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

时间:2024-03-15 19:48:58

一.问题

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

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

二.解决办法

我选择使用vm作为单位

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

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

px-to-vm。

 具体用法如下:

  1.安装px-to-vm插件

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

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

2.设置设计稿的宽度

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

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

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

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

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

 

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

      移动开发适配,px转vm总结   选中 ——>  alt + z   ——>  移动开发适配,px转vm总结

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

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