尺寸单位
- rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
| 设备 | rpx换算px (屏幕宽度/750) | px换算rpx (750/屏幕宽度) |
|---|---|---|
| iPhone5 | 1rpx = 0.42px | 1px = 2.34rpx |
| iPhone6 | 1rpx = 0.5px | 1px = 2rpx |
| iPhone6 Plus | 1rpx = 0.552px | 1px = 1.81rpx |
建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。
注意： 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。
display:flex 定位：相对，绝对 可参考资料：blog.csdn.net/qq_41260655…
弹性布局是父元素控制子元素的布局方案，不需要计算，自动分配
父元素：display:flex //开启弹性盒模型（默认子元素，从左向右排列，（无论块级还是行内元素））
flex-direction:设置主轴方向 默认主轴方向：row（水平向右）； 默认侧轴方向：垂直向下 其属性有： （reverse：相反） 1、row:默认值从左到右 2、row-reverse:从右到左 3、column：从上到下 4、colmun-reverse:从下到上
justify-content:设置主轴上的子元素的排列方式 1、flex-start:默认从头开始，如果主轴是x轴，则从左到右 2、flex-end：从尾部开始排列 3、center：主轴居中对齐（如果主轴是x轴，则水平居中） 4、space-around:平分剩余空间（重要，经常使用） 5、space-between：先两边贴边，在平分剩余空间（重要，经常使用） ————————————————
flex-wrap：设置子元素是否换行 1.nowrap:不换行（默认不换行） 2.wrap:换行
align-items： 控制子项在侧轴（默认是y轴）上的排列方式，在子项为单项的时候使用。 属性： 1、flex-start:默认值，从上到下 2、flex-end：从下到上 3、center：挤在一起居中（垂直居中） 4、stretch:拉伸（子元素不能设置高度） ————————————————
