开发移动端项目如何rem适配

window.addEventListener('resize', setHtmlFontSize)
setHtmlFontSize();
function setHtmlFontSize() {
    // 根据屏幕的宽度来改变根元素的字体大小的值
    // 当前屏幕 / 标准的375屏幕 求得你当前屏幕是标准屏幕的多少倍  * 标准屏幕根元素的字体大小
    // 当前屏幕的宽度 / 375 * 100
    // 假如当前750/375 = 2 * 100 == 200px
    // 1. 当前屏幕的宽度
    var windowWidth = document.documentElement.offsetWidth;
    // 限制最大屏幕 和最小屏幕
    if (windowWidth > 640) {
        windowWidth = 640;
    } else if (windowWidth < 320) {
        windowWidth = 320;
    }
    //2. 标准屏幕的宽度
    var StandardWidth = 375;
    // 标准屏幕的html的字体大小
    var StandardHtmlFontSize = 100;
    //3. 当前屏幕需要设置的根元素的字体大小
    //要设置的根元素字体大小 = 当前屏幕宽度 / 标准屏幕宽度 * 标准屏幕的html的字体大小
    var htmlFontSize = windowWidth / StandardWidth * StandardHtmlFontSize;
    //4. 把当前计算的html 字体大小设置到页面的html元素上就可以
    document.querySelector('html').style.fontSize = htmlFontSize + 'px';
}

 
将以上代码引入项目的每个html文件。
例如我用MUI框架开发项目，项目文件结构搭建好，引入相应的MUI框架文件，要把引入的MUI框架的css样式用rem转换工具，将px单位的属性转换为rem，进行替换。
转换的比例，假如我的设计稿宽度为375px，我将根元素字体大小设置为100px（为了方便计算），这个html {font-size: 100px;}是设置给项目的css公共样式。
接着开发项目就可以用rem单位。移动端rem适配就这样完成了。当然要记得导入视口。