小程序界面开发实现各种机型自适应

最新推荐文章于 2024-02-29 05:00:00 发布

爬虫世界

最新推荐文章于 2024-02-29 05:00:00 发布

阅读量6.9k

点赞数 5

文章标签： vue.js html css css3 javascript

本文链接：https://blog.csdn.net/m0_47180536/article/details/105607469

版权

小程序界面开发实现各种机型自适应

如下图，一般以iPhone6为作为视图的标准，宽和高的适应都是转换为物理像素进行自适应的，计算的公式为（屏幕宽度/750）*（元素在iPhone6上显示的px高度或者宽度）*2，结果就是元素在另一个屏幕显示的高度或宽度。
在这里插入图片描述

这是我创建的demo

demo布局
一般小程序的布局大概有两种，这里我用的是第一种（顶部导航，内容，底部导航）
在这里插入图片描述

如何实现自适应

首先是要找出页面中不变的元素
一般来说，顶部和底部导航我们都是固定的，demo例子中我的导航栏都是自定义的，整个手机的宽度和高度都是可用区域。我们可以先设置好顶部和底部的导航栏高度，用一个盒子来装，高度要用rpx，里面的元素也都要设置为rpx，（记得顶部导航栏上面的状态栏要用px，可以调用wx.getSystemInfo(Object object）这个api，里面有statusBarHeight这个状态栏高的参数）大概是这样子。
在这里插入图片描述
内容框的大小
内容框建议使用scrollView，超出有滚动条，未超出则没有滚动条
怎么设置内容框大小
这里就需要用到自适应那条公式
（屏幕宽度/750）*（元素在iPhone6上显示的px高度或者宽度）*2，我们需要知道顶部导航栏和底部导航在不同型号下变化之后的高度（这个高度是px），例如我使用的是iphone5（320，568），顶部导航栏在iPhone6（375,667）的高度是44px，代入公式得到顶部导航栏在iPhone5的高度是（320/750）×44×2=37px，会有点小误差，但是总体上都会自适应。

在这里插入图片描述
计算出底部和顶部的高度后，就获取整个手机的高度，并减去（状态栏＋顶部+底部）的和的高度（获取屏幕高度API，wx.getSystemInfo里的windowHeight参数）

这样就可以计算出scrollview的高度了，记得要用scrollView高都度属性要用px!,这样就可以实现自适应所有机型了