微信小程序踩坑之旅（三）：不同机型布局适配问题（rpx，px，vh，vw）

2024-03-27 06:57| 来源: 网络整理| 查看: 265

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(前端开发交流群)

【本文地址】

公司简介

联系我们