字体大小适配屏幕分辨率

        当我们改变屏幕分辨率的时候，字体大小并不会随着分辨率的改变而改变。我们可以试着让字体大小适配屏幕分辨率。

        首先我们需要获取到屏幕的宽度，然后把屏幕的宽度除以1920再乘以10，我们需要传入一个参数res，如果res的数值比较大字体就大，代码如下：

    FontChart(res) {
        //获取到屏幕的宽度
        var clientWidth =
          window.innerWidth ||
          document.documentElement.clientWidth ||
          document.body.clientWidth; 
        if (!clientWidth) return; //报错拦截：
        let fontSize = 10 * (clientWidth / 1920);
        return res * fontSize;
      },

<div class="myFont">字体一</<div>
document.getElementById("myFont").style.fontSize= FontChart(1);

        我们还可以做一个屏幕适配，代码如下：

  const appConfig  = {   
    screen:{
        width:1920,
        height:1080,
        scale:20
    }
}
export function pageResize(callback) {
    let init = () => {
        let _el = document.getElementById('app');
        let pageH = window.innerHeight;
        let pageW = window.innerWidth;
       
        let isWider = (window.innerWidth / window.innerHeight) >= (appConfig.screen.width / appConfig.screen.height);
        console.log(isWider);
        if (isWider) {
                _el.style.height = window.innerHeight+'px';// '100%';
                _el.style.width = pageH * appConfig.screen.width / appConfig.screen.height + 'px';
                _el.style.top='0px';
                _el.style.left=(window.innerWidth -pageH * appConfig.screen.width / appConfig.screen.height)*0.5+'px';
                console.log(_el.style.width + "," + _el.style.height)
        }
        else {
                _el.style.width = window.innerWidth+'px';// '100%';
                _el.style.height = pageW * appConfig.screen.height / appConfig.screen.width + 'px';
                _el.style.top= 0.5*(window.innerHeight-pageW * appConfig.screen.height / appConfig.screen.width)+'px';
                _el.style.left='0px';
        }
        document.documentElement.style.fontSize =  (_el.clientWidth / appConfig.screen.scale) + 'px';
 
      
    }    
    var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
    window.addEventListener(resizeEvt, init, false);
    document.documentElement.addEventListener('DOMContentLoaded', init, false);
    init()
}