小程序界面开发实现各种机型自适应

（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例子中我的导航栏都是自定义的，整个手机的宽度和高度都是可用区域。我们可以先设置好顶部和底部的导航栏高度，用一个盒子来装，高度要用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、给子元素的前面添加一个兄弟元素（可以加一条细线，颜色为背景颜色）