移动端适配问题

👽常见问题分析

首先本人其实做移动端也没有多久，但是最近发现适配其实是移动端一个很重要的问题，所以就为各位同学整理了一下，希望下面的对大家有所帮助！

👾移动端单位

常见单位:

px rpx 百分比 vw vh em rem
px:绝对单位，最小的单位，不会因为手机像素大小改变
rpx:相对单位，一般来说 2rpx = 1px,但是实际上是存在误差的，适配性比px好很多
百分比：其实就是把父级元素划分成100分
vw和vh:将可视区域划分为100分，所以当手机大小不一时，1vw的大小也会随之改变，虽然实现了适配性，但是在实际中不是很良好
em:也是个相对长度单位，一般来说 1em = 16px,当然，这是默认字体为16px的时候，所以一般屏幕是60em,适配性远超vh

这里是我暂时想到的，可能还有些没有用到
1.如果只是适配手机端的话，建议使用em来适配，不同类型手机变化不大
2.高度需要适配平板的话，建议使用vh来适配高度，vh会根据屏幕的大小来变化，所以平板也可以完美适配，只是同时应该添加屏幕大小来限制某一块的高度，这样可以使得高度看上去比较美观

平板和手机还是有很大 的区别：
（1）手机端在Form表单和固定底部按钮时可能值需要很小的margin-bottom,但是在平板就会被遮盖一部分，导致使用平板时不能滑动到底部，Form表单里面的信息看不完整，这里需要给最外层的盒子一个更大的margin-bottom来适配平板，单位建议使用rpx可以更好的适配

3.字体大小、间距和图片：如果公司要求是要做成响应式的话，建议使用rpx，它会根据手机屏幕大小动态变化

👹 背景图片适配

其实背景图片是必然会用到的一个东西，所以背景图片适配也是成为了一个问题

backgroud-img:url("");
background-repeat:no-repeat;
background-size:100% 100%;

加上这些就可以实现背景图片的适配了,温馨提示：微信小程序背景图片最好使用https，不然真机显示不了

🦴布局适配

布局我给大家推荐的是display:flex弹性布局
主要是flex布局可以更好的水平和垂直方向居中，并且更容易实现适配
水平适配主要是采用左侧固定宽度，右侧内容flex:1即可实现水平适配

🪶高度适配

可能最常见的一个场景就是列表，通常列表我们不可能给一个定死的高度，所以这事我们需要给一动态的值

在微信小程序中，通常是使用差值的方式，然后获取整块屏幕的高度，如果没有其他内容的话，此时： 列表高度 = 屏幕高度
有搜索框或底部固定按钮：列表高度 = 屏幕高度 - 搜索框高度（底部按钮高度）
当然实际开发中需要按实际场景来计算

这是我目前体会到的一下知识，希望对大家有所帮助，欢迎大家批评和指正!