js 动态 更改文档根fontsize 适配手机端

rem方法

/*
 * @Descripttion: 
 * @version: 
 * @Author: xiewutao
 * @Date: 2020-08-07 16:34:12
 * @LastEditors: sueRimn
 * @LastEditTime: 2020-11-16 09:41:46
 */
// //js动态适配
(function (win,doc){

	if(document.readystate="complete"){//页面加载完毕时候，执行fresh
		handerRemFun();
	}else{
		document.addEventListener('DOMContentLoaded',handerRemFun,false);//等待页面加载完毕再执行fresh
  }
  
	win.addEventListener('resize',function(){
    console.log("resize")
    handerRemFun()
  },false);//窗口变化时候也执行fresh




  // 处理方法问题
  function handerRemFun(){
    let isAndroid = navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Linux') > -1; //是否是安卓
    let isWeiXin=(window.navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == 'micromessenger')? true :false;
    if(isAndroid && isWeiXin){ 
       checkRemAndroidFun()
    }else{
      setFontSizeFun();
    }
    // checkRemAndroidFun()
  }

  // 检测安卓机字体是否重置
  function checkRemAndroidFun(){
    let fontSize=setFontSizeFun();
   
    var elem = document.createElement('div');
    elem.setAttribute('id','demoRem');
    elem.style.cssText = 'width:1rem; height:0rem';
    document.body.appendChild(elem);
    let one_w=document.getElementById('demoRem').offsetWidth;
    console.log("one_w",one_w,'fontSize',fontSize)

    if(fontSize!=one_w){
      console.log("安卓机，微信浏览器 重置字体大小")
      if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
          handleFontSize();
      } else {
          if (document.addEventListener) {
              document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
          } else if (document.attachEvent) {
              document.attachEvent("WeixinJSBridgeReady", handleFontSize);
              document.attachEvent("onWeixinJSBridgeReady", handleFontSize);
          }
      }
    }else{
      console.log("安卓机，微信浏览器 不用重置大小")
      setFontSizeFun();
    }
    document.getElementById('demoRem').remove();
  } 



  //微信字体重置字体
  function handleFontSize() {
    // 设置网页字体为默认大小
    WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : '2' },function(){
      console.log("invoke")
      setFontSizeFun()
    });
    // 重写设置网页字体大小的事件
    WeixinJSBridge.on('menu:setfont', function() {
        WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : '2' });
        console.log("menu:setfont")
        setFontSizeFun()
    });
  }  


  // 更改根元素字体大小
  function setFontSizeFun(){
		var html=doc.documentElement;
    var w_c= html.clientWidth;
    var fontSize=0;
		if(w_c>750){
      html.style.fontSize=100+'px';
       //fontSize=100;
      
		}else{
      html.style.fontSize=100*(w_c/750)+'px';
       //fontSize=parseInt(100*(w_c/750));
    }
    return fontSize;
  }

})(window,document)

移动端单位适配有多种方案，以下是主要的适配方法：

1、rem 适配方案：如上

2、Flexble 方案（淘宝方案）

引入 lib-flexible

3、 PostCSS 插件方案

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-pxtorem')({
      rootValue: 37.5,     // 设计稿宽度/10，375/10=37.5
      propList: ['*'],     // 需要转换的属性，*表示所有
      exclude: /node_modules/i,
      selectorBlackList: ['.norem']  // 忽略的类名
    })
  ]
}

/* 设计稿 375px，写设计稿尺寸 */
.container {
  width: 375px;        /* 编译后: 10rem */
  padding: 15px;       /* 编译后: 0.4rem */
  font-size: 16px;     /* 编译后: 0.426rem */
}

/* 忽略转换 */
.ignore-rem {
  width: 100px;        /* 不转换 */
  border: 1px solid #000; /* 通常边框不转换 */
}

4、媒体查询方案

单文件媒体查询

/* 超小屏幕 (手机, 375px 以下) */
@media (max-width: 374px) {
  .container {
    padding: 10px;
    font-size: 14px;
  }
}

/* 小屏幕 (手机, 375px - 414px) */
@media (min-width: 375px) and (max-width: 414px) {
  .container {
    padding: 15px;
    font-size: 16px;
  }
}

/* 中等屏幕 (平板, 415px - 768px) */
@media (min-width: 415px) and (max-width: 768px) {
  .container {
    padding: 20px;
    font-size: 18px;
  }
}

/* 大屏幕 (桌面, 769px 以上) */
@media (min-width: 769px) {
  .container {
    padding: 30px;
    font-size: 20px;
  }
}

多文件媒体查询

<!-- 所有设备都加载，但通过媒体查询控制生效 -->
<link rel="stylesheet" href="base.css"> <!-- 基础样式 -->
<link rel="stylesheet" href="tablet.css" media="(min-width: 768px)">
<link rel="stylesheet" href="desktop.css" media="(min-width: 1024px)">