px、rpx、em、rem、rem布局原理

px

Pixel 像素，相对长度单位。像素是相对于显示器分辨率而言。

rpx

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

小程序规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px。即小程序的750rpx就等于屏幕的宽度，1rpx=（屏幕宽度/750）px。rpx 的具体长度会随着屏幕的宽度变化而变化。

设备 rpx换算px (屏幕宽度/750)      px换算rpx (750/屏幕宽度)
iPhone5 1rpx = 0.42px 　        　 1px = 2.34rpx
iPhone6 1rpx = 0.5px 　　　    　1px = 2rpx
iPhone6s 1rpx = 0.552px 　    　 1px = 1.81rpx

em

em是一个相对的长度单位，跟随父级的大小而变化。

 <div style="font-size: 60px;">div的字体
    <p style="font-size:0.5em;">p 的内容
      <span style="font-size: 0.5em;">span的内容</span>
    </p>
  </div>

最外层的div字体为60px，p字体为30px，span字体为15px。

p的字体大小设置为0.5em，此时父级div字体为60px。此时1em=60px，那么0.5em=30px。

span的字体大小设置为0.5em，span的父级是p,此时p的字体为30px，那么1em=30px，所以span的字体为0.5em=15px；

注意，em 的大小永远跟随父级改变，父级字体设置的大小，即为子级1em的大小，以此类推。

rem

rem 也是一个相对的单位，仍是相对大小，但相对的只是HTML根元素。通过rem，既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

html{
  font-size: 62.5%;   /*  公式16px*62.5%=10px  */    
}

html的字体大小决定了1rem的大小。当html设置font-size: 62.5%; 那么1rem=10px;

如果想要设置1rem=20px;可以设置html的font-size: 20px，或者font-size: 20/16=125%;

注意： 
1 若没有在根元素（html字体）指定参照值，那浏览器默认1 rem就是16px,若指定值，则1rem就是指定值 
2 html设置为62.5%或者10px时会失效，是因为 小于12px或者75%的字体大小 不支持换算。这可能与有些浏览器不支持12px以下的大小有关。所以，使用rem单位，html的字体默认字体大小必须设置为12px或以上。若小于12px则浏览器换算时自动默认字体为12px。

 rem布局原理

1.  假设设计稿的宽度为750px，把宽度等分为15份（也可以是10或者20）；
2. 那么一份的宽度就是50px；设置HTML的字体大小为50px；即为1rem=50px；
3. 此时设计稿宽度50px*50px的区域则为1rem*1rem；
4. 假设屏幕宽度变为150px;
5. 那么一份的宽度就是10px；此时只需改变HTML字体的大小为10px；则无需改变其他值。

 

总宽度（px）	1rem宽度	实际宽度（px）	对应rem
750px	50px	100px	2rem
150px（屏幕缩小）	10px	20px（随设计稿等比缩小）	2rem（数值不变）