一.问题
如图:如果使用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 ——>
此时保存,重新刷新页面发现,刚刚不适配的情况解决啦