浅谈rem与rpx布局

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

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

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

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

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

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

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

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

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

flex-direction有两个属性，默认属性flex-direction-row从左到右，flex-direction-row-reverse从右往左。

flex-direction: column从上往下，flex-direction: column-reverse从下往上。

我在对View视图容器进行格式背景颜色定义background-color。定义完只有内容填充才显示背景颜色。其中对高height：100%，width：100%。解决办法是对上级目录pages进行定义高度height：100%。

justify-content ，主轴上的对齐方式，有五个属性

justify-content-center/ flex-start/flex-end/space-around/space-between，居中/左对齐（默认）/右对齐/分散对齐（等距）/两端对齐

align-items 交叉轴对齐方式，有六个属性。

align-items：flex-start/flex-end/center/stretch/baseline,顶部对齐/底部对齐/居中对齐/（元素没有定义高都占满整个容器交叉轴方向）填充/元素文字对齐

flex-grow: 当有多余空间时，元素的放大比例

flex-grow:0；不放大 flex-grow:1；放大各占取一份

flex-shrink 空间不足时按比例缩小，默认 flex-shrink:1不缩小。随着数值增大缩小。

flex-basis 元素在主轴上占据的空间，由于微信的解析程度不够导致flex-basis失效，故这里不用rpx，而是px

flex 是grow shrink basis 的简写

order定义元素的排列顺序

align-self 定义元素自身对齐方式

小程序详情页尺寸是75016001400

你在设计稿件中可以把做成750px宽，而高度，我建议你做成1600，然后掐头去尾留1400高度作为画布的高度。并且要求考虑到屏幕变长变短后UI是否可以适应。(这个和设计自适应网页一致)

为什么要这样做？

不同手机高度是不相同的。当然宽度也不相同，但是小程序给了你一种机制rpx，可以把屏幕宽度确定在750rpx，那么只要考虑高度上适应。

做到含系统UI1600的话，差不多是小屏幕和大屏幕的折中。那么你在这个基础上调整，能够比较方便。

如UI要考虑到横屏？

那这个时候就很不一样了喔，要把高宽思维调过来。

如果内容要支持高清？

那么你设计UI的时候，按照750px屏宽做可以的。

但是在处理内容的时候可以再翻大一倍。代价就是变大了。这个权衡好了再定。如果一个界面一下子打开一百个内容的列表，一口气要加载十几m，那体验也会糟糕。

如果不是设计，是开发定义css怎么办？

和其他人不同，我不建议用750rpx定义。如果需要横向盛满，那么应该用100%，或者更酷的100vw。

如果是UI元素的，用em，rem。这些都是CSS原生的概念。和一个像素被智能切成了多少个像素没关系。

这样就可以延续更加成熟的CSS框架思想。

该功能基于vue-cli3；cli2的方法大差不差

以上两步就可以实现小程序中rpx功能，针对设计稿为750px的移动端。

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

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

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

iPhone5 1rpx = 042px      1px = 234px ；

iPhone6 1rpx = 05px 1px = 2rpx ；

iPhone6s 1rpx = 0552px 1px = 181rpx；

小程序单位对应的符号如下：

1，pt，单位名称为点，绝对长度单位。

2，px，像素，相对长，度单位。

3，em，相对长度单位。

4，rem，是CSS3新增的一个相对单位，是相对HTML根元素。

5视口单位vw：1vw=视口宽度的1%，vh：1vh=视口高度的1%，vmax：vmax选取vw和vh中最大的那个，vmin：vmin选取vw和vh中最小的那个。

6，rpx，是微信小程序中css的尺寸单位。

7，ch，是由CSS3规范引入的一个新单位，表示“0”字形的宽度。

8，ex，当前字体的x-height或者一个em的一半。

9，pc、in、mm、cm绝对长度单位。

开发者可以通过设计稿基准宽度计算页面元素 rpx 值，设计稿 1px 与框架样式 1rpx 转换公式如下：

设计稿 1px / 设计稿基准宽度 = 框架样式 1rpx / 750rpx

换言之，页面元素宽度在 小程序 中的宽度计算公式：

750 元素在设计稿中的宽度 / 设计稿基准宽度

举例说明：

若设计稿宽度为 750px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 小程序 里面的宽度应该设为：750 100 / 750，结果为：100rpx。

若设计稿宽度为 640px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 小程序 里面的宽度应该设为：750 100 / 640，结果为：117rpx。

若设计稿宽度为 375px，元素 B 在设计稿上的宽度为 200px，那么元素 B 在 小程序 里面的宽度应该设为：750 200 / 375，结果为：400rpx。

以上就是关于浅谈rem与rpx布局全部的内容，包括:浅谈rem与rpx布局、微信小程序——UI精讲、小程序详情页尺寸大小多少等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！