#思考# 移动端绝对定位在不一样设备适配问题

需求：须要展现的数据已在数据库设置好，而且是以大屏幕为准，如今须要在不一样设备上显示出来

实现：全部物体都采用绝对定位，根据实际屏幕与数据库设置的屏幕尺寸比例，对数据进行缩放

• 背景 居中铺满

  background-position: center center;
  background-size: cover;

• 中间内容 水平和垂直居中

  width:500px;
  height:300px; // 假设宽高是这么多  
   
  position:absolute;
  top:50%,
  left:50%;
  transition:translate(-50% -50%);

• canvas画布上的图形或图片
  canvas上面不一样于其余dom，画布宽高不能经过样式设置，不然容易模糊，因此宽高经过计算后的宽高设置。
  一、canvas上画的图形：
  canvas宽高缩放后的值显示，画布上的元素的每一个坐标缩放后画上去。

  二、canvas显示图片（迷宫）
  canvas的宽高，不能缩放，必须整张图的宽高来显示，否则图片会被剪切掉，因此只能将整个canvas渲染完成后使用样式的scale缩放。引伸出的问题是，迷宫中的“小人”运动时的对出口的判断，采用移动的当前位置是否超过迷宫的宽高，这时候的宽高也就不能使用缩放后的值，虽然看起来迷宫变小了，但其实里面的坐标是没有变的。

• 交互中的复杂问题
  一、拖动物体摆放位置
  物体的宽高，起点位置都已计算

  二、拖动物体过程当中
  移动过程当中移动距离须要缩放；

  三、元素目标位置是否为预设的位置判断
  预设位置已进行计算