在vue移动端中,使用pxtorem插件无法将行内样式中的px转换为rem,所以会出现排版错乱的问题,可以使用正则表达是对返回的格式进行处理之后再使用
返回的格式实例
![](https://i-blog.csdnimg.cn/blog_migrate/ae9658512e586c1b279e5bc51049362a.png)
代码
function convertPxToRem(str) {
// 获取屏幕宽度
const screenWidth = window.screen.width;
// 计算html的fontsize
const htmlFontSize = (screenWidth / 375) * 16;
// 匹配所有的px值
const reg = /(\d+)px/g;
// 将匹配到的px值转换成rem
return str.replace(
reg,
($0, $1) => `${parseFloat($1) / htmlFontSize}rem`
);
}
const richText = res.data.data.content;
const convertedText = convertPxToRem(richText);
console.log(convertedText);
// 示例
this.contant = convertedText;
处理之后的富文本实例
![](https://i-blog.csdnimg.cn/blog_migrate/604982b21fbcee36a1871b2d28f121dd.png)
可以发现px已经全部转换为rem了
在vue中可以使用v-html解析富文本
<div v-html="contant"></div>
如果排版还是错乱,可以跟后端商量一下换一种方法,可以返回一个链接,然后前端只需在页面中内嵌这个网页即可
可以使用iframe标签内嵌网页
<iframe src="链接地址" frameborder="0" class="ifcontant"></iframe>