微信小程序填坑之路(三):布局适配方案(rpx、px、vw、vh)
2023-09-11 14:19:38 时间
因为小程序是以微信为平台运行的,可以同时运行在android与ios的设备上,所以不可避免的会遇到布局适配问题,特别是在iphone5上,因为屏幕尺寸小的缘故,也是适配问题最多的机型,下面就简单介绍几种适配方法。
rpx适配
rpx是小程序中的尺寸单位,它有以下特征:
- 小程序的屏幕宽固定为750rpx(即750个物理像素),在所有设备上都是如此
- 1rpx=(screenWidth / 750)px,其中
screenWidth
为手机屏幕的实际的宽度(单位px),例如iphone6的screenWidth=375px,则在iphone6中1rpx=0.5px
由上可知,在不同设备上rpx与px的转换是不相同的,但是宽度的rpx却是固定的,所以可以使用rpx作为单位,来设置布局的宽高。
vw、vh适配
vw和vh是css3中的新单位,是一种视窗单位,在小程序中也同样适用。
- 小程序中,窗口宽度固定为100vw,将窗口宽度平均分成100份,1份是1vw
- 小程序中,窗口高度固定为100vh ,将窗口高度平均分成100份,1份是1vh
所以,我们在小程序中也可以使用vw、vh作为尺寸单位使用在布局中进行布局,但是一般情况下,百分比+rpx
就已经足够使用了,所以它们的出场机会很少。
转: https://www.jianshu.com/p/fc08527604a1
相关文章
- 微信小程序 - promise(getpost)
- 微信小程序-获取用户信息(getUserInfo)
- 【微信小程序】-- WXML 模板语法 - 事件绑定 -- tap & input (十)
- 微信小程序 - 引入使用 MD5 加密
- 微信小程序 - 根据后端返回的唯一 ID / code,生成 “唯一“ 的推荐码、邀请码、订单号、加密路由、一串英文+数字长字符等 (支持反序列化原 ID 解码,逆向得出 ID 二者互转)wechat
- 微信小程序 - 在视图组件上绑定函数并携带参数(事件对象自定义属性传参)
- 微信小程序的模板消息与小程序订阅消息
- 前端微信小程序云开发基础讲解
- 微信小程序开发基础
- 微信小程序~自定义属性设置和获取(data-)
- 微信小程序API~用户信息
- 微信小程序使用本地图片在真机不显示的问题
- 微信小程序原生开发功能合集四:复选框组件的封装
- 微信公众号之渲染静态模板
- 微信公众号平台开发-事件推送
- 微信小程序 Object of type ‘datetime‘ is not JSON serializable解决方法
- 微信小程序学习第1天:微信小程序开发入门介绍
- 微信开放平台和公众平台的区别