鍍金池/ 問答/HTML5  PHP  HTML/ Edge瀏覽器不支持resize事件,怎么解決?

Edge瀏覽器不支持resize事件,怎么解決?

現(xiàn)在需要字體自適應(yīng)屏幕寬度,當(dāng)屏幕觸發(fā)resize時(shí),字體相應(yīng)的增大或縮小,但是發(fā)現(xiàn)在微軟最新瀏覽器Edge下,屏幕寬度改變卻無法改變字體大小,代碼如下:

注:這是vue.js寫的代碼,還有一個(gè)奇怪的問題是,(function......)(window,document);代碼塊寫在mounted事件里面不行(字體顯示非常小,執(zhí)行change();方法,字體數(shù)字大了,屏幕上的字體卻很?。?,寫在created事件里面才可以。

<template>
  <div style="position: relative;left: 0;right: 0;bottom: 0;background: #000; height: 500px;">
        <div class="prop-lang" id="prop-lang">
          <div>
            就是這個(gè)垃圾瀏覽器
          </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>

補(bǔ)充:問題已經(jīng)找到了,和vue.js沒關(guān)系,是因?yàn)樵O(shè)置了全局樣式html, body{ font-size: 14px; },但是又不能去掉,該怎么解決呢?

回答
編輯回答
離人歸

resize事件是否綁定成功 是否每次寬度改變執(zhí)行了change方法
如果change執(zhí)行了那是否fontSize沒有賦值成功

2017年11月29日 12:20
編輯回答
笨小蛋

window上綁定事件應(yīng)該不用等待具體內(nèi)容渲染完成的,所以先開始的created鉤子和后開始的mounted鉤子應(yīng)該都是可以對window綁定resize事件的。

綁定事件的時(shí)候可以先檢測一下addEventListener方法是否可用,如果不可用可以兼容使用attachEvent(但是IE9以后包括Edge也已經(jīng)通用了addEventListener)

另外created鉤子和mounted鉤子是自動執(zhí)行的,沒有必要用自執(zhí)行函數(shù),當(dāng)然使用的話也沒有關(guān)系

具體我可以找個(gè)Edge瀏覽器試一下

2018年8月1日 02:36
編輯回答
孤酒

其實(shí),如果是想做到實(shí)現(xiàn)根據(jù)屏幕尺寸大小來調(diào)整整體網(wǎng)頁字體大小可以這樣實(shí)現(xiàn):
1.設(shè)置html,body{font-size:10px;} 設(shè)10是因?yàn)榈葧悍奖阌?jì)算。
2.網(wǎng)頁標(biāo)題,內(nèi)容font-size全部用rem單位。具體rem可自行百度
3.利用css的media媒體查詢,檢測不同分辨率下設(shè)置不同的html,body的font-size大小即可實(shí)現(xiàn)網(wǎng)站整體字體大小調(diào)整

2018年8月10日 16:12
編輯回答
不將就

建議CSS能完成的就盡量不要用JS
用媒體查詢吧,根據(jù)屏幕尺寸劃分幾個(gè)范圍,分別設(shè)定html,bodyfont-size,樓上說的很清楚了

2018年4月19日 17:50
編輯回答
怪痞

問題解決了,雖然感覺不是很合理。

把需要(準(zhǔn)備)用 rem 來控制字體大小的元素的 rem 改為 %,然后將需要控制字體大小的元素動態(tài)設(shè)置字體大小就行了:

doc.getElementById('adv-rules-wrap').style.fontSize=doc.documentElement.clientWidth/375*20+'px';   
2017年2月25日 05:35