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

本文探讨了移动应用开发中如何实现px到vm的单位转换以实现字体和页面元素的自适应。通过使用vm单位和px-to-vm的VSCode插件,可以简化转换过程,提高开发效率,确保页面在不同设备上视觉效果的一致性。
摘要由CSDN通过智能技术生成

一.问题

如图:如果使用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&

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值