頁面布局的坑----解析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就已經足夠使用了,是以很少使用它們。