Edge浏览器不支持resize事件，怎么解决？

Question

现在需要字体自适应屏幕宽度，当屏幕触发resize时，字体相应的增大或缩小，但是发现在微软最新浏览器Edge下，屏幕宽度改变却无法改变字体大小，代码如下：

注：这是vue.js写的代码，还有一个奇怪的问题是，(function......)(window,document);代码块写在mounted事件里面不行（字体显示非常小，执行change();方法，字体数字大了，屏幕上的字体却很小），写在created事件里面才可以。

<template>

  <div style="position: relative;left: 0;right: 0;bottom: 0;background: #000; height: 500px;">

        <div class="prop-lang" id="prop-lang">

          <div>

            就是这个垃圾浏览器

          </div>

        </div>

  </div>

</template>

<script>

export default {

  name: "index",

  created() {

    (function(win,doc){

      function change(){

        doc.documentElement.style.fontSize=doc.documentElement.clientWidth/375*20+'px';

      }

      change();

      win.addEventListener('resize',change,false);

    })(window,document);

  },

  data() {

    return {        

    };

  },

};

</script>

<style>

.prop-lang div{

    font-size: 0.8rem;

    font-weight: 100;

    font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;

    color: #ffffff;

    text-align: center;

}

</style>

补充：问题已经找到了，和vue.js没关系，是因为设置了全局样式html, body{ font-size: 14px; }，但是又不能去掉，该怎么解决呢？

Answer 1

问题解决了，虽然感觉不是很合理。把需要（准备）用 rem 来控制字体大小的元素的 rem 改为 %，然后将需要控制字体大小的元素动态设置字体大小就行了：doc.getElementById('adv-rules-wrap').style.fontSize=doc.documentElement.clientWidth/375*20+'px';

Answer 2

resize事件是否绑定成功 是否每次宽度改变执行了change方法如果change执行了那是否fontSize没有赋值成功

Answer 3

window上绑定事件应该不用等待具体内容渲染完成的，所以先开始的created钩子和后开始的mounted钩子应该都是可以对window绑定resize事件的。绑定事件的时候可以先检测一下addEventListener方法是否可用，如果不可用可以兼容使用attachEvent（但是IE9以后包括Edge也已经通用了addEventListener）另外created钩子和mounted钩子是自动执行的，没有必要用自执行函数，当然使用的话也没有关系具体我可以找个Edge浏览器试一下

Answer 4

其实，如果是想做到实现根据屏幕尺寸大小来调整整体网页字体大小可以这样实现:1.设置html,body{font-size:10px;} 设10是因为等会儿方便计算。2.网页标题，内容font-size全部用rem单位。具体rem可自行百度3.利用css的media媒体查询，检测不同分辨率下设置不同的html,body的font-size大小即可实现网站整体字体大小调整

Answer 5

建议CSS能完成的就尽量不要用JS用媒体查询吧，根据屏幕尺寸划分几个范围，分别设定html,body的font-size，楼上说的很清楚了