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

Kahn 發布于2019-08-23 18:17 / 1165人閱讀

摘要：交互中的復雜問題拖動物體擺放位置物體的寬高，起點位置都已計算拖動物體過程中移動過程中移動距離需要縮放元素目標位置是否為預設的位置判斷預設位置已進行計算

需求：需要展示的數據已在數據庫設置好，并且是以大屏幕為準，現在需要在不同設備上顯示出來

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

背景居中鋪滿

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、元素目標位置是否為預設的位置判斷
預設位置已進行計算

GPU云服務器云服務器移動端適配移動端適配方案移動端適配 js 相對定位-絕對定位

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104988.html

移動端適配方案

摘要：業務環境是決定整體項目的適配方案的核心因素。而淘寶的主站和類似，分為移動端頁面和端頁面，端頁面同樣有著左右的留白，這也是為了讓用戶能夠在寬屏的時候將注意力集中在中間區域。移動端適配方案移動端適配方案是一個老生常談的話題，但是對于不同的項目、不同的業務場景可能會需要不同的適配方案來進行移動端適配，向下兼容的baseline也需要提前訂好。整體寬高其實移動端適配就和下面的玩具一樣，...

feng409 2019-08-30 15:54 評論0 收藏0
CSS布局說——可能是最全的

摘要：元素框相對于之前正常文檔流中的位置發生偏移，并且原先的位置仍然被占據。這些相對于布局來說是基礎的，同時也是非常重要的。可以看到，浮動元素，其實對于布局來說，是特別危險的。前言現在，我們被稱為前端工程師。然而，早年給我們的稱呼卻是頁面仔。或許是職責越來越大，整體的前端井噴式的發展，使我們只關注了js，而疏遠了css和html。其實，我們可能經常在聊組件化，咋地咋地。但是，回過頭來思...

hearaway 2019-08-30 15:53 評論0 收藏0
HTML-CSS

摘要：但是，從字體上來說雪碧圖制作，使用以及相關，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標準布局的情況下，回滾到舊版本的，保證移動設備中能呈現出一樣的布局效果。我不想陷入和的紛爭，但是有一件事是確定的極大的提升了移動端一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 ...

xiaokai 2019-08-01 18:21 評論0 收藏0