css中单位总结与flex布局

uni-app中的rpx

rpx 即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大。
rem 默认根字体大小为 屏幕宽度/20（微信小程序、字节跳动小程序、App、H5）.

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

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

换言之，页面元素宽度在 uni-app 中的宽度计算公式：

750 * 元素在设计稿中的宽度 / 设计稿基准宽度
Tips
rpx不支持动态横竖屏切换计算，使用rpx建议锁定屏幕方向
设计师可以用 iPhone6 作为视觉稿的标准。

Flex布局

为支持跨平台，框架建议使用Flex布局，关于Flex布局可以参考外部文档
A Complete Guide to Flexbox（https://css-tricks.com/snippets/css/a-guide-to-flexbox/）、
阮一峰的flex教程

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
https://uniapp.dcloud.io/frame

em

1.1em的理解
1em并不是固定等于多少像素的，而是根据元素的字体大小而定，如果是等宽字体（即每个字符的宽度都是一样的），1em就是1个字符的宽度，如果是比例字体（通常只有英文字体才有）则1em等于英文大写字母“M”的宽度。
（1）设置Body的font-size
很多前辈在多年的实践中得出一个经验，他们建议我们在body中设置一个正文文本所需的字体大小，或者设置为“10px”，相当于（“0.625em或62.5%”），这样为了方便其子元素计算。这两种都是可取的。但是我们都知道，body的默认字体是“16px”，同时我们也很清楚了，我们改变了他的默认值，要让弹性布局不被打破，就需要重新进行计算，重新进行调整。所以完美的设置是：

body {font-size:1em;}

1
可是在那个没人爱的IE底下，“em”会有一个问题存在。调整字体大小的时候，同样会打破我们的弹性布局，不过还好，有一个方法可以解决：

html {font-size: 100%;}

需要转换的像素值 ÷ 父元素的font-size = em值

（2）元素自身要是设置了字体大小
元素自身要是设置了字体大小后，其计算公式就不在是前面所说的，我们需要做一下修改：
1、字体计算公式依旧

1 ÷ 父元素的font-size × 需要转换的像素值 = em值

2、其它属性的计算公式需要换成

1 ÷ 元素的font-size × 需要转换的像素值 = em值

（3）总结
1.浏览器的默认字体大小是16px
2、如果元素自身没有设置字体大小，那么元素自身上的所有属性值如“boder、width、height、padding、margin、line-height”等值，我们都可以按下面的公式来计算

1 ÷ 父元素的font-size × 需要转换的像素值 = em值

3、这一种千万要慢慢理解，不然很容易与第二点混了。如果元素设置了字体大小，那么字体大小的转换依旧按第二条公式计算，也就是下面的：

1 ÷ 父元素的font-size × 需要转换的像素值 = em值

那么元素设置了字体大小，此元素的其他属性，如“border、width、height、padding、margin、line-height”计算就需要按照下面的公式来计算：

1 ÷ 元素自身的font-size × 需要转换的像素值 = em值

https://blog.csdn.net/WuLex/article/details/99627369

rem

兼容性：
目前，IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支持了rem。
就算对不支持的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。
使用%单位方便使用
css中的body中先全局声明font-size=62.5%，这里的%的算法和rem一样。
因为100%=16px，1px=6.25%，所以10px=62.5%，
这是的1rem=10px，所以12px=1.2rem。px与rem的转换通过10就可以得来，很方便了吧！
 使用方法
注意，rem是只相对于根元素htm的font-size，即只需要设置根元素的font-size，其它元素使用rem单位设置成相应的百分比即可；