微信小程序开发 -页面布局介绍- 附简单小程序实例（底部）

小程序实例

关于移动端分辨率

• 将不同尺寸的设计图，按照一定的比例，完美的显示在页面之中

pt

• 逻辑分辨率
• 和屏幕的物理尺寸有关
• 长度和视觉单位

px

• 物理分辨率
• 不是长度相关的单位
• 1px就是一个像素点
• 1 pt物理尺寸下有多像素点（px）

Reader

• 求每一个pt下面包含了多少个px

PPI（DPI）

• 利用分辨率什么的实用勾股定理算出的数值

关于rpx–小程序的自适应单位

• 1个pt可以有一个px构成，也可以有2个，或者更多
• iPhone6下2个px构成一个pt

如何做不同分辨率设备的自适应

• 以iPhone6的物理像素750X1135为视觉稿进行设计，在小程序中实用rpx为单位
• iPhone6 1px = 1rpx = 0.5pt

为什么实用iPhone6的物理分辨率来做设计

• iPhone6 下 1px = 1rpx
• iPhone6plus 1px = 0.6rpx
• 小程序官方推荐使用iPhone6来进行设计
  并不是所有的单位都适用rpx

开启项目

• 创建一个纯净