具体代码如下所示：
//设置根元素字体
var
win
=
window,
doc
=
document
function
setFontSize()
{
var
winWidth
=
$(window).width()
//750这个数字是根据你的设计图的实际大小来的，所以值具体根据设计图的大小
var
size
=
(winWidth
/
750)
*
100
doc.documentElement.style.fontSize
=
(size
<
100
?
size
:
100)
+
'px'
}
//这里我们给个定时器来实现页面加载完毕再进行字体设置
setTimeout(function()
{
//初始化
setFontSize()
},
100)
以上所述是小编给大家介绍的Js动态设置rem来实现移动端字体的自适应代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
方法一：rem单位 使用amfe-flexible和postcss-pxtorem （写的时候需要转换单位）
vant本身是px单位的，实际项目设计图是750px宽，若要实现同时自适应，需要结合两个插件：
amfe-flexible和postcss-pxtorem
步骤如下
一、如何将px单位转化为rem？
借助 postcss-pxtorem 插件，postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem。
安装：
配置：vue.config.js文件
二、如何做rem适配？
rem适配文档上建议使用 lib-flexible ，flexible适配的原理是物理像素与逻辑像素的相互转化：物理像素px = window.screen.width(逻辑像素pt) * window.devicePixelRatio
如何配合框架使用:
1.安装
2.main.js引入
（index.html要设置meta）
————————————
关于使用
为了要使用vant的样式，rootValue应设置为37.5
设计图是750px宽的，则写的时候如果用px 则需要除以2，如果用rem的话，要自行计算 px/75=rem，或者使用IDE的插件计算
使用蓝湖的话，很方便
另，如果不使用vant，单纯的还原设计图
可以将rootValue设置为75，css像素可以直接按设计图写
参考： https://www.cnblogs.com/changxue/p/11322855.html
方法二（推荐）：vw单位 使用postcss-px-to-viewport （自定义的样式）
安装
npm install postcss-px-to-viewport --save-dev
配置：
使用这个 vant的单位不变 自定义的单位可直接写px 会转化为vw
开发 WebApp 时，我们通常只会从设计师那边拿到一个尺寸的项目设计图，比如是按照 iphone 6 为基础设计的，因此前端需要让这一套设计稿能够通用在不同的设备型号中，本文介绍的方式是采用 hotcss.js 插件。
在 vue-loader 中使用 px2rem 插件，首先安装 px2rem-loader ：
根据设计稿所采用的手机型号（如iPhone 6 或 iPhone X），那么宽度则为 640px 或 750px ，因此先在 chrome 调试工具中获取移动端的 <html> 根元素的 font-size 的值，然后在配置 vue-loader 时将其设为 remUnit 参数的值:
这样就可以根据设计稿尺寸，在开发时写 CSS 像素的绝对值 ，即 px 单位， px2rem 会自动将尺寸转换成相应的 rem 单位，结合不同终端生成的不同 html 根元素的字体大小，从而实现一套设计稿在不同设备完美兼容的效果。
我将之前做的一个项目目录结构和 Webpack 配置文件提取出来，生成一个简易的 WebApp 脚手架，用于实现本文所述的自适应方案。
Github项目地址： 基于Vue的WebApp项目构建模板
