#思考# 移動端絕對定位在不一樣設備適配問題

需求：須要展現的數據已在數據庫設置好，而且是以大屏幕爲準，如今須要在不一樣設備上顯示出來

實現：全部物體都採用絕對定位，根據實際屏幕與數據庫設置的屏幕尺寸比例，對數據進行縮放

• 背景 居中鋪滿

  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縮放。引伸出的問題是，迷宮中的「小人」運動時的對出口的判斷，採用移動的當前位置是否超過迷宮的寬高，這時候的寬高也就不能使用縮放後的值，雖然看起來迷宮變小了，但其實裏面的座標是沒有變的。

• 交互中的複雜問題
  一、拖動物體擺放位置
  物體的寬高，起點位置都已計算

  二、拖動物體過程當中
  移動過程當中移動距離須要縮放；

  三、元素目標位置是否爲預設的位置判斷
  預設位置已進行計算