思路
先根据视口宽度(window.innerWidth-滚动条宽度)设置html(根元素)的font-size,再使用字符串的replace方法正则匹配替换px单位为rem单位。
代码
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
var font = $(window).width()/10;
$('html').css('font-size',font+'px');
// 全局替换px为rem
var remHtml=$('body').html().replace(/(\d+|\d+\.\d+)px/g, function(a,b){
var num=b/font+"";
return num.substring(0, 5)+"rem";
})
console.log(remHtml);
</script>
打开控制台将打印的 remHtml复制替换到原来的body中即可。