rem的作用与运用，小程序为什么用rpx为单位

开发过小程序的人都知道，小程序的单位是rpx，这是为什么？有什么作用呢，其实它源于rem布局，先来了解下rem的优势与工作原理。

rem布局在没正式使用到项目中，只知道他是根据html根元素的font-size来变化的

若：html{ font-size:20px}

则1rem = 20px

然后呢，有什么作用，定完html的font-size后，元素使用rem和使用px有什么区别，不都一样么？

其实rem他的主要运用场所在移动端，移动端的设计稿一般都是iphone6为基础设计的，设计稿的宽为750px；

手机的物理尺寸是375px；所以在用css的时候，设计尺寸需要除以2；

要用rem完成移动端的适配，答顷需要固定浏览器的显示宽度不变。

也就是说，我在设计稿上量到宽367px的大小，那么css里可以旁举宽直接写width:3.67rem。

此时，（以375px宽手机为例）第二步js设置的html字体大小为：375px除以7.5得50px；

7.5rem乘以50px得到的是375px刚好是屏幕的满宽。

也就是说，不论手机屏幕宽度多少，7.5rem永远能占屏幕的满宽。这样，在宽屏手机里，元素能够等比例放大一些，实现各类机型的适配，也方便了前端编码。

而做过小程序的人都知道，小程序不论任何机型，屏幕满宽都是750rpx，其实也就是从7.5rem延伸而来，至于根目录字体大小的配置，微信开发者工具已经将这些都配置好了，你尽情用就可以了。

如果有帮助，请点运亮赞支持哦。

rem大家或许都比较熟悉，而rpx则是腾讯在公测小程序时所推崇；二者实质并无太大的区别，在很多的小白前端开发阶段会不懂为什么一些老前端在开发移动端过程中会出现部分地方不使用rem或者rpx而转用px，接下来谈谈我的看法：

一般开发中横向布局通常使用rem/rpx布局，纵向布局部分使用px

（适用于一行布局中多个元素布局）

1. 这里以上图为例，因为每一台手机的屏幕横向的大小是固定的，如果使用px则可能在小屏幕出现位置不可控，导致内容换行错乱等问题。故使用rem/rpx单者洞派位布局。

2. 而手机纵向的高度是无限颤尺延伸的，所以上下边距和边框等则可以使用px固定像数，这样不会对页面效果产生太大影响，而且也不用担心元素不可控错乱等问题。

（适用于一行中单元素或者左右两端的小型元素布局）

1. 同样一上图为例，对于这样的单元素或者左右小元素，可以选择px固定尺寸，原因是当横行布局只有一个元素时根本不会产生错乱，因为屏幕的宽度远大于这点小元素的宽度，如果产生错乱则可以放弃该手机适配了首贺（这种小屏幕早该淘汰了）。

2. 纵向布局原理与上面一致。

本文章仅代表个人开发观点，实际情况实际分析，如果还是不懂就记住一句话：发生错乱就必须使用rem或者rpx布局；围绕此观点就不会有错。如果有错误还望各位大师指出，这也是我第一次写文章，多多指教。

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

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

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

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

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

---