PC网页、移动端适配，页面font-size动态变化

方法一：

1. 首先，在页面引入"viewport"属性,这些属性可根据自己的需要修改

2. 在标签里引入动态修改font-size的代码，此段需要优先加载，以免页面布局错乱

pc端：

第一种
(function (doc, win) {
    var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
      /*设置一个屏幕最大宽度临界值，当大于这个宽度时，字体也不放大了*/
      if(clientWidth>=1240){
          docEl.style.fontSize = '14px';
      }else{
          /*1920是设计稿的宽度，14是浏览器默认值14(px)*/
          docEl.style.fontSize = 14* (clientWidth / 1920) + 'px';
      }
    };
 
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
  })(document, window);

第二种
(function () {
    function setRootFontSize() {
        let rem, rootWidth;
        let rootHtml = document.documentElement;
        //限制展现页面的最小宽度
        rootWidth = rootHtml.clientWidth < 1366 ? 1366 : rootHtml.clientWidth;
        // 19.2 = 设计图尺寸宽 / 100（ 设计图的rem = 100 ）
        rem = rootWidth / 19.2;
        // 动态写入样式
        rootHtml.style.fontSize = `${rem}px`;
    }
    setRootFontSize();
    window.addEventListener("resize", setRootFontSize, false);
})();

移动端：

 (function () {
    function setRootFontSize() {
        let dpr, rem, scale, rootWidth;
        let rootHtml = document.documentElement;
    
        dpr = window.devicePixelRatio || 1; //移动端必须设置
        //限制展现页面的最小宽度
        rootWidth = rootHtml.clientWidth < 375? 375: rootHtml.clientWidth;
        rem = rootWidth * dpr / 3.75; // 19.2 = 设计图尺寸宽1920 / 100（设计图的rem = 100）
        scale = 1 / dpr;
    
        // 设置viewport，进行缩放，达到高清效果 (移动端添加)
        let vp = document.querySelector('meta[name="viewport"]');
        vp.setAttribute('content', 'width=' + dpr * rootHtml.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');
    
        // 动态写入样式
        rootHtml.style.fontSize = `${rem}px`;
    }
    setRootFontSize();
    window.addEventListener("resize", setRootFontSize, false);
    window.addEventListener("orientationchange", setRootFontSize, false); //移动端
})();

方法二：

移动端开发中，为适应不同屏幕尺寸，需要字体根据屏幕大小改变而改变。

第一种（css解决）：

html{
	font-size: calc(100vw/36);   
	font-size: -webkit-calc(100vw/36);  
	font-size: -moz-calc(100vm/36);    
}

原理：让不同尺寸的屏幕有一个统一的单位来衡量。
csl()是一个函数function，calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的宽度。
vw：视口的最大宽度，1vw=视口宽度的百分之一；
vh：视口得最大高度，1vh=视口高度的百分之一；
vmin/vm：相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin（即vm）。
-moz-代表火狐浏览器的内核
-webkit-代表谷歌浏览器的内核

第二种（js解决）：

文字（自适应）屏幕宽度

方法：这里的vw是视窗宽度，15是15px绝对尺寸，2240就是自己屏幕的宽度，可以按照需求写。calc：是一个css自带的计算方法，可以自动计算后返回px单位的值。

font-size:calc( 100vw * 20 / 2240);

我们的需求是文字大小是25px,而我们的屏幕是2240*1400，这时就可以将设置25px。

font-size:calc( 100vw * 25 / 2240);