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

需求：需要展示的数据已在数据库设置好，并且是以大屏幕为准，现在需要在不同设备上显示出来

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

• 背景 居中铺满

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

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

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

• canvas画布上的图形或图片

  canvas上面不同于其他dom，画布宽高不能通过样式设置，否则容易模糊，所以宽高通过计算后的宽高设置。

  1、canvas上画的图形：

  canvas宽高缩放后的值显示，画布上的元素的每个坐标缩放后画上去。

  2、canvas显示图片（迷宫）

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

• 交互中的复杂问题

  1、拖动物体摆放位置

  物体的宽高，起点位置都已计算

  2、拖动物体过程中

  移动过程中移动距离需要缩放；

  3、元素目标位置是否为预设的位置判断

  预设位置已进行计算