大屏适配方案

目录

方案一：transform

当屏幕宽高比<=16:9时

当屏幕宽高比>16:9时

放入地图

方案二：rem

---

方案一：transform

思路：设置外层根元素的宽高，同时采用transform对该元素及其子元素进行缩放transform:scale(scaleRate)，使该元素宽度适配当前窗口

缩放的倍数scaleRate有以下两种情况：

当屏幕宽高比<=16:9时

按照1920：1080计算，固定父元素width=1920px,height=1080px, 根据宽度缩小比例进行缩小。

步骤：屏幕的可视宽度rootWidth，屏幕缩放倍数 scaleRate=rootWidth/1920，此时Dom应显示的高度为1080 * scaleRate。父元素设置transform:scale(scaleRate)（此时屏幕底部会有一些空白）

当屏幕宽高比>16:9时

当屏幕宽高比>16:9时，1080*scaleRate > 实际高度，当前屏幕放不下，此时scaleRate按照高度计算，scaleRate=rootHeight/1080， width=rootWidth/scaleRate（因为transform：scale时会缩放，相当于Dom最后的宽度=rootWidth/scaleRate*scaleRate=rootWidth,此时屏幕水平方向的间距会比较大）

屏幕宽高比小于16：9

 屏幕宽高比=16：9

 屏幕宽高比大于16：9

放入地图

home.vue

1.设置resize全局监听，引入Amap组件

amap.vue

id=mapContainer节点作为地图的容器

踩坑：设置#mapContainer{width:100%;height: 100%}，这样设置地图继承了父节点宽高，但是出现了一个问题，使用海量点渲染，点击事件不生效（LabelsLayer、LabelMarker），这是因为父元素的transform:scale改变了标注的位置

解决方法：父节点scale(x)倍，mapContainer也scale(1/x)倍，并把该节点设置为position:absolute,父元素设置 overflow: hidden;

//home.vue

//amap.vue

//resize.js
export function resizeWindow() {
  //home节点的缩放，参考上面的缩放代码 
  ......
  
  //mapContainer节点
  // 父级元素缩小的同时，放大地图，是地图根元素的transform:scale(1),这样地图上的marker标注才不会偏移
  let mapContainer = document.getElementById('mapContainer')
  let scaleRateReverse = (1 / scaleRate).toFixed(5) * 1
  mapContainer.style.transform = `scale(${scaleRateReverse})`;
}

方案二：rem