当前位置:首页 - 前端

uniapp中h5项目使用rpx、rem的问题

发布时间:2022年04月13日 访问量:6845

css中的样式会自动把rpx或upx计算成rem,html标签中定义的 style="font-size:20rpx" 这种,会计算成px

在uniapp中都是以750的设计图计算的,750px宽的时候,100rpx=100px

在style中或样式文件中用了rpx或upx,会自动按1rem=32px计算,如:100rpx会计算成3.25rem

在标签中用rpx会直接计算成px,如100rpx会根据宽自动计算成对应的px,750px宽的时候,100rpx=100px

如果是640的设计图,设计图中的100px,在uniapp中需要按比例计算一下(我是这样理解的:相当于640的设计图,在750的设备中显示),117.1875rpx = 750 * 100 / 640

总结:小程序+h5或者只做小程序,用rpx,只做h5,如果是普通手机端的项目最好直接用rpx,如果是做大屏的h5(电脑全屏显示)再用rem,(因为直接建vue项目node_modules文件夹太大,整个项目好几百M起步,太占硬盘空间了,而uniapp的项目中没有node_modules文件夹,node_modules在软件安装目录,所以如果用uniapp来做,每个项目就小很多了)