• 移动端webview屏幕自适应写法+Echarts自适应写法


    首先新建一个rem.js文件,放到公共js文件夹,如下:

    (function(doc, win) {
      const docEl = doc.documentElement;
      const isIOS = navigator.userAgent.match(/(i[^;]+;( U;)? CPU.+Mac OS X/);
      const dpr = isIOS ? Math.min(win.devicePixelRatio, 3) : 1;
      // 被iframe引用时,禁止缩放
      const dps = window.top === window.self ? dpr : 1;
      const resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
      docEl.dataset.dpr = dps;
      function recalc() {
        let width = docEl.clientWidth;
        if (width / dps > 750) {
          width = 750 * dps;
        }
        docEl.dataset.width = width;
        docEl.dataset.percent = 100 * (width / 750);
        docEl.style.fontSize = 100 * (width / 750) + 'px';
      }
      recalc();
      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
    })(document, window);

    然后在main.js中引入rem.js 模块

    import './utils/rem.js';

    如果要在Echarts中使用rem那么需要额外做一些工作

     如图,在绘制函数的外部注册一个rem转换px的函数,如下:

        function remToPx(rem) {
          const fontSize = document.documentElement.style.fontSize;
          return Math.floor(rem * fontSize.replace('px', ''));
        }

    在相应的地方调用这个函数,将rem的值填入其中就可以了,本质上还是将rem根据fantsize的值转换为px,因为Echarts内部只接受px单位的数据。

  • 相关阅读:
    随笔
    打破生活的套牢
    健忘是种美德
    【转贴】怎样冒充古典高手!
    php数组中删除元素
    JS 总结
    ubuntu apache rewrite
    JS 预览超级大图
    UBUNTU 安装SVN
    Yahoo14条前端优化规则
  • 原文地址:https://www.cnblogs.com/wangtong111/p/12566990.html
Copyright © 2020-2023  润新知