rpx与px

官方文档的解释

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

下面我来举个例子大家就明白了：
我自定义的导航栏高度为64rpx，我现在在导航栏下方还有一个导航栏，我希望在我向上滑动的过程中，下面的导航栏能够吸附在顶部导航栏下面，可能讲起来有点抽象，请看下面两张图

最终达到的效果图：

现在应该能大致了解这个问题了，可是该怎么实现呢？
顶部导航栏的高度为64rpx，如果是iphone6的话，我们只需要将下方的导航栏的在滚动的过程中，超过一定界限是，将下方导航栏的top值设置为64rpx即可，可是如果是iphone5手机甚至是其他类型的安卓机呢？

请看代码：

 changeHeight(){
    wx.getSystemInfo({ //首先获取当前机型的宽度
      success: function (res) {//在利用宽度/750，保留两位小数
        //从而计算出当前机型1rpx代表多少px,例如iphone5,1rpx=0.42px
        phoneHeight = Math.floor(res.screenWidth / 750 * 100) / 100
      }
    })
    var query = wx.createSelectorQuery();
    query.select('.topNav').boundingClientRect((rect)=> {
      // console.log(rect)
      this.setData({//height=64,不同机型，需要使用下方的公式
        height: rect.height*(1/phoneHeight) + 'rpx'
      })
    }).exec();
  },

vw与vh

这两个单位是css3中新增的单位

vh表示窗口高度，100vh可以理解成将窗口分成100份，1份=1vh
vw表示窗口宽度，100vw可以理解成将窗口分成100份，1份=1vw

在开发过程中，这两个单位用的比较少，小程序中普遍使用rpx

这是我在做导航栏悬浮遇到的问题，之后有时间的话会详细写一篇导航栏悬浮的博文，这篇如果有什么不懂的问题的话，可以留言告诉我，我再补充上，争取让博文更细致

如果有不会的或者有疑问的同学，欢迎在下方留言噢，很乐意为大家解答

若未能及时回答，也可以选择加入前端开发交流群提问噢~~

群号：216644014(前端开发交流群)