• 移动端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单位的数据。

  • 相关阅读:
    React
    TypeScript 引入第三方包,报无法找到模块错误
    typescript / webpack报错“can only be default-imported using the 'esModuleInterop' flag
    React & Webpack & Typescript & scss
    Cannot set property ‘innerHTML’ of null 错误原因
    Kick Start 2019
    delet[] 和delete
    c++ 深入理解虚函数
    C++ 虚函数表解析
    typedef void(*Func)(void)的简单用途
  • 原文地址:https://www.cnblogs.com/wangtong111/p/12566990.html
Copyright © 2020-2023  润新知