背景图与内容的自适应方案

场景：要做一个内容与背景自适应的导航条

设计图大小：1920px
如图：

方案：

通过css缩放，来让背景和内容在不同分辨率下保持适配（相对位置、大小）

步骤：

1.分别获取浏览器分辨率windowWidth和已知的设计图分辨率1920；计算出缩放比；
    windowWidth = window.innerWidth;
    designWidth = 1920;
    计算出缩放比
    scale = windowWidth / designWidth;
2.将定位上去的DOM元素按照缩放比进行缩放，这里有两个注意点
   (1)除内容按比例缩放外，定位相关的left和right值也要进行缩放
   (2)缩放默认是以中心点缩放的、如果DOM元素是按照左上角定位的，那么需要把缩放原点调整到左上角；
   同理，如果是按照右上角定位的，需要把缩放原点调整到右上角。

实现： 写一个指令方便调用：

  mounted(el,bingding){
    let { draftWidth, top, left } = bingding.value;

    el.scaleRtio = window.innerWidth / draftWidth;

    el.setPositionFun = (scaleRtio,top,left) => {
      el.style.transformOrigin = `top left`;
      el.style.top = `${ scaleRtio * top }px`;
      el.style.left = `${ scaleRtio * left }px`;
      el.style.transform = ` scale(${ scaleRtio }`;
    }

    el.setPositionFun(el.scaleRtio, top, left);

    el.resize = e => {
      el.scaleRtio = e.target.innerWidth / draftWidth;
      el.setPositionFun(el.scaleRtio, top, left);
    }
    window.addEventListener('resize',el.resize)
  },
  updated(){
    el.setPositionFun(el.scaleRtio, top, left);
  },
  unmounted(el){
    window.removeEventListener('resize',el.resize);
    el.resize = null;
    el.scaleRtio = null;
    el.setPositionFun = null;
  }
}

export default setPosition

调用：

 <div class="innerBox" v-setPosition="{draftWidth:1920,top:20,left:60}">内容</div>