实现网页自适应不同尺寸 屏幕（PC端）

        前言：需求是一个静态展示页面根据UI提供设计稿完成，最好是适应具有不同屏幕尺寸，具体要求没提。

• 网上查找相关自适应布局，有很多种方案如下

1. media 媒体查询 类似于响应式布局根据不同屏幕显示不同效果布局
2. 百分百布局实现     可能也会存才拉伸 不能百分百还原设计图
3. bootstrap, vue项目中使用flexible.js  （只要一个静态页面不用框架pass）
4. rem布局

        采用2.果然通过百分比实现的页面只在和设计稿同等宽度屏幕效果最完美，其余会有不同程度拉伸。

• 采用rem布局方式

        什么是rem布局？

        百度官方解释

        rem（font size of the root element）是指相对于根元素的字体大小的单位

        经过搜索找到，通过js代码，根据获取到的屏幕宽度，动态修改html标签中fontSize的px单位的值

 (function(doc,win){
    let fn = () => {
        let docEl = doc.documentElement,
            clientWidth = docEl.clientWidth;
        if (!clientWidth) return;
        docEl.style.fontSize = 100 * (clientWidth / 1920) + 'px';
        
    }
    if (!doc.addEventListener) return;
    win.addEventListener('resize',fn);
    doc.addEventListener('DOMContentLoaded',fn);
    })(document,window);

        其中1920就是UI设计稿提供的宽度，这样就算是屏幕不是1920也可以根据比例放大缩小，实现百分百还原设计稿。

        对应的css样式中 1rem=100px; 根据设计稿效果还原即可

• IE兼容问题

        测试发现IE效果和其他浏览器不同，开始定位问题发现

        根元素fontSize 没有被设置成功，打开开发者模式发现

        

         好家伙竟然是IE不兼容ES6语法，果断把箭头函数改成正常function解决

function fn (){
        let docEl = doc.documentElement,
            clientWidth = docEl.clientWidth;
        if (!clientWidth) return;
        docEl.style.fontSize = 100 * (clientWidth / 1920) + 'px';
        
    }

        再次打开IE发现显示IE阻止了这个控件，必须点击允许才能显示页面正常大小，百度一圈发现在添加如下注释即可