小程序界面开发实现各种机型自适应
目录
小程序基本的机型大小
（320,568),(375,667),(414,736),(375,812),(414,896),(360,640),(411,731),(412,732),(480,800),(375,667),(375,736),(414,896),(768,1024),(834,1112),(1024,1366) 备注：单位px
小程序自适应原理
如下图，一般以iPhone6为作为视图的标准，宽和高的适应都是转换为物理像素进行自适应的，计算的公式为（屏幕宽度/750）*（元素在iPhone6上显示的px高度或者宽度）*2，结果就是元素在另一个屏幕显示的高度或宽度。
这是我创建的demo
demo布局
一般小程序的布局大概有两种，这里我用的是第一种（顶部导航，内容，底部导航）
如何实现自适应
首先是要找出页面中不变的元素
一般来说，顶部和底部导航我们都是固定的，demo例子中我的导航栏都是自定义的，整个手机的宽度和高度都是可用区域。我们可以先设置好顶部和底部的导航栏高度，用一个盒子来装，高度要用rpx，里面的元素也都要设置为rpx，（记得顶部导航栏上面的状态栏要用px，可以调用wx.getSystemInfo(Object object）这个api，里面有statusBarHeight这个状态栏高的参数 ）大概是这样子。
内容框的大小
内容框建议使用scrollView，超出有滚动条，未超出则没有滚动条
怎么设置内容框大小
这里就需要用到自适应那条公式
（屏幕宽度/750）*（元素在iPhone6上显示的px高度或者宽度）*2，我们需要知道顶部导航栏和底部导航在不同型号下变化之后的高度（这个高度是px），例如我使用的是iphone5（320，568），顶部导航栏在iPhone6（375,667）的高度是44px，代入公式得到顶部导航栏在iPhone5的高度是（320/750）×44×2=37px，会有点小误差，但是总体上都会自适应。
计算出底部和顶部的高度后，就获取整个手机的高度，并减去（状态栏＋顶部+底部）的和的高度（获取屏幕高度API，wx.getSystemInfo里的windowHeight参数）
这样就可以计算出scrollview的高度了，记得要用scrollView高都度属性要用px!,这样就可以实现自适应所有机型了
关于scrollView
scroll-view内部的第一个盒子添加margin-top属性会出现滚动条
这是由于margin-top 垂直方向塌陷导致的
解决方法
1、给父盒子添加border
2、给父盒子添加padding-top
3、给父盒子添加overflow:hidden
4、父盒子:position:fixed
5、父盒子:display:table
6、给子元素的前面添加一个兄弟元素（可以加一条细线，颜色为背景颜色）