我有个海报类似低代码的需求,在pc后台组装好后在移动端微信公众号绘制成图片,我的方案是:
1、后台提交的时候,把所有成员的width,height,left,top转化为相对外框的百分数。
2、在移动端直接赋值给每个海报成员的style。
问题:
1、字体在pc端设置fontszie在其盒子可以一行显示,例如手机号fontSize:20px, width:130。在移动端我用rem去适配字体,document.documentElement.style.fontSize = 100 * 海报宽 / pc海报外框。字体设置为0.2rem,最后的结果是手机号一行放不下,有一个数字换行了。移动端字体rem适配,pc可以一行显示,移动换行
2、有两行字的fontSize一样,宽度一样,但是一行居中显示,一行左对齐,通过移动将左对齐的那行文字移动到和居中那行文字对齐,在移动端显示的时候居中显示的文字会向右偏移半个字,也就是说居中之后的间隙比pc大,当我将pc数据设置给移动style的时候把fontSize加上2以及将html的字体+2的时候接近对齐了。居中对齐的两行字在移动端不对齐
我觉得适配方法用rem没问题呀,移动端各成员盒子的百分比和pc一样的,百分比没问题,问题应该出现在字体的渲染上,是不是浏览器渲染字体的差异?pc和移动用的font-family是PINGFANG SC。