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

Kahn 发布于2019-08-23 18:17 / 1134人阅读

摘要：交互中的复杂问题拖动物体摆放位置物体的宽高，起点位置都已计算拖动物体过程中移动过程中移动距离需要缩放元素目标位置是否为预设的位置判断预设位置已进行计算

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

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

背景居中铺满

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 相对定位-绝对定位

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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