简书链接:rem屏幕移动端适配相关资料echart解决datav移动端问题
文章字数：467,阅读全文大约需要1分钟
datav的全屏布局经过测试无法适配，特别是横屏，所以就没用了。
https://github.com/amfe/lib-flexible/blob/2.0/index.js
原理是当窗口变化，根html字体会变化，rem则是根据此变化而显示对应的大小。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
(function flexible(window, document) {
  var docEl = document.documentElement;
  var dpr = window.devicePixelRatio || 1;

  var isAndroid = window.navigator.appVersion.match(/android/gi)
  var isIPhone = window.navigator.appVersion.match(/iphone/gi)
  var devicePixelRatio = window.devicePixelRatio
  if (isIPhone) {
    // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
    if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
      dpr = 3
    } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
      dpr = 2
    } else {
      dpr = 1
    }
  } else {
    // 其他设备下，仍旧使用1倍的方案
    dpr = 1
  }



  // adjust body font size
  function setBodyFontSize() {
    if (document.body) {
      document.body.style.fontSize = 12 * dpr + "px";
    } else {
      document.addEventListener("DOMContentLoaded", setBodyFontSize);
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 10
  function setRemUnit() {
    var rem = docEl.clientWidth / 150;
    docEl.style.fontSize = rem + "px";
  }


/*
  const screenWidth = 1800
  const scale = screenWidth / 16
  const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth

  //   var rem = document.documentElement.clientWidth / 24;
  //   document.documentElement.style.fontSize = rem + "px";
  const htmlDom = document.getElementsByTagName('html')[0]
  // 设置根元素字体大小
  htmlDom.style.fontSize = htmlWidth / scale + 'px'*/

  setRemUnit();

  // reset rem unit on page resize
  window.addEventListener("resize", setRemUnit);
  window.addEventListener("pageshow", function(e) {
    if (e.persisted) {
      setRemUnit();
    }
  });

  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement("body");
    var testElement = document.createElement("div");
    testElement.style.border = ".5px solid transparent";
    fakeBody.appendChild(testElement);
    docEl.appendChild(fakeBody);
    if (testElement.offsetHeight === 1) {
      docEl.classList.add("hairlines");
    }
    docEl.removeChild(fakeBody);
  }
})(window, document);

由于根字体变大了，body字体需要重置所以可以看到上面的body进行了调整。

echart
datav
不支持rem，所以直接import后调用此remToPx方法

1
2
3
4
5
export function remToPx(rem) {
    var fontSize = document.documentElement.style.fontSize;
    var result= Math.floor(rem * fontSize.replace('px', ''));
    return result
}

datav的那些边距无法调整，只能通过设置相对偏移进行微调
而装饰粗细，只能通过重写svg,自己实现，反向，则翻转样式

1
2
3
4
.flip-horizontal {
    transform: scaleX(-1);
}

针对pc和手机端进行不同的调整不同的rem单位

/* 小于750的属于iphone */

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
@media screen and (max-width: 750px) {
    #titlebarbg {
        height: 8rem !important;
        width: 35rem !important;;
    }
    #logostyle {
        height: 7rem !important;
    }


    .screenright{
        width: calc(100% + 1.5rem) !important; left: -1.2rem;position: relative;;
    }
    .screentop{
        height: calc(100% + 0.2rem) !important; top: -0.3rem;position: relative;
    }
    .screenbottom{
        height: calc(100% + 1.4rem) !important; top: -1.3rem;position: relative;
    }
}

/* PC端*/
#titlebarbg {
    height: 5rem;
    width: 30rem;
}

#logostyle {
    height: 2.5rem;
}




.screenright{
     width: calc(100% + 0.4rem) !important; left: -0.4rem;position: relative;;
}
.screentop{
    height: calc(100% + 0.2rem) !important; top: -0.1rem;position: relative;
}
.screenbottom{
    height: calc(100% + 0.4rem) !important; top: -0.4rem;position: relative;
}

datav的全屏容器我最后去掉了，只用到了里面的装饰。

参考笔记
https://www.cnblogs.com/cjuan/p/9448981.html
https://blog.csdn.net/syt_1013/article/details/127666848