小程序的ui框架尺寸

小程序的 UI 设计指南在小程序官方文档中均有介绍，以微信官方设计文档为参照：

1、 小程序布局：小程序的布局主要采用块察大状结构进行布局，优先采用卡片、列表或网格等布局方式；

2、 小程序 UI 调色：小程序的 UI 调色使用典型的灰色调子，较亮的颜色基调使用明度较浅的颜色余巧；

3、小程序 UI 尺寸：败毁竖采用 1080px 宽，720px 高的界面设计尺寸，控件尺寸以 8px 为基准单位，即每个控件的间距需以 8px 设计；

4、 小程序 UI 字号：字体最大尺寸 36px，最小尺寸 24px，中等字体尺寸使用 30px。

rpx是微信小程序中css的尺寸单位，可以根据屏幕宽度进行自适配。

规定屏幕宽度为750px，譬如宽哗拿iphone6，屏幕宽度为375px，共慎搭有750个物理像素，则1rpx = 0.5px。

设备rpx换算px：屏幕宽度/750，px换算成rpx:750/屏幕宽度芦尺；

iPhone5 1rpx = 0.42px      1px = 2.34px ；

iPhone6 1rpx = 0.5px 1px = 2rpx ；

iPhone6s 1rpx = 0.552px 1px = 1.81rpx；

官方文档介绍：

因余闭此我竖汪裂们可以得知，任何手机屏幕宽度都是 750 rpx，手机陵樱屏幕的高度则可以由宽高比计算得出。在模拟器中你可以看到 iPhone 7, iPhone 7 Plus 和 iPhone X 的宽高比。

---