页面布局的坑----解析px、rpx、rem、vw

px

   绝对单位，页面按精确像素展示。PC端使用，不能自适应。

 

rpx

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

     微信小程序规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。由此也可以知道，不同尺寸的屏幕，换算的结果也是不同的。

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

建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

rem 

  相对单位，微信小程序规定屏幕宽度为20rem；1rem = (750/20)rpx =37.5rpx;

 

vw和vh

css3中的新单位，是一种视窗单位，在小程序中也同样适用。

小程序中，窗口宽度固定为100vw\vh，将窗口宽度平均分成100份，1份是1vw\vh

但是一般情况下，百分比+rpx就已经足够使用了,所以很少使用它们。