微信小程序填坑之路（三）：布局适配方案（rpx、px、vw、vh）

因为小程序是以微信为平台运行的，可以同时运行在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

转载于:https://www.cnblogs.com/fps2tao/p/11098204.html

微信小程序填坑之路（三）：布局适配方案（rpx、px、vw、vh）相关推荐

微信小程序填坑之路(三)--上传头像
上传头像, 使用wx.chooseImage({})后在使用wx.uploadFile({})结合起来使用. 示例代码: Page({data: {src: "../../image/ph ...
微信小程序填坑之路（六）：wx.getUserInfo 接口的变动与使用
问题在微信小程序开发中,获取用户信息是经常会用到的!在之前,我们直接调用wx.getUserInfo接口,就可以直接获取用户的信息.然而为了安全考虑,从2018年4月30号开始,wx.getUser ...
微信小程序填坑之路其一：wx.request发送与服务端接受
一.序言应公司要求要求,要用小程序开发一个信息录入系统.没办法只能听话来填坑. 先介绍一下环境:客户端--小程序:服务端--java:数据库--mysql:服务器--centos7 需求:客户端输入 ...
Java小程序post如何传参,[Java教程]微信小程序填坑之路其一：wx.request发送与服务端接受...
为了有一个接口地址,花了一个月时间去买了服务器.注册了域名.部署了一下.备案-得到了https的合法域名. 首先这个请求的url必须是https,老版本的怎样不是很清楚,据说可以用http?想办法弄一 ...
微信小程序填坑之路（一）：text空格符号以及省略号
1.text的空格符首先需要设置<text> 控件的decode值 decode可以解析的有 < > & ' 值说明 ensp 中文字符空格一半大小 em ...
微信小程序填坑视频篇
写了一年小程序,每天接受数万付费用户的考验,踩过小程序的坑数不胜数.先写一下视频篇,写一些会影响到用户正常看视频功能和影响业务主体流程的坑. 1.一些低端设备无法播放高清视频 1080p 需要接入转码 ...
微信小程序填坑篇 2
微信小程序开发的时候,很多接口都不太能信任,需要作一些额外的兜底处理.保证程序在什么情况下都能尽可能健康的运行. 也要有一套健全的异常收集反馈机制,方便迅速发现问题解决问题. 小程序生态的异常监控体系 ...
微信小程序iPhoneX 底部虚拟Home键区域适配方案
微信小程序iPhoneX 底部虚拟Home键区域适配方案为什么要适配? 先看下iPhoneX和之前的iPhone的区别,如下图可以看出主要是顶部和底部多了一些区域,如果页面内容进入该区域,有可能会 ...
微信小程序填坑：上传头像；wx.chooseImage，wx.uploadFile
因为wx.chooseImage,wx.uploadFile的组合十分常见,并且极其容易遇到坑:请作者来检查一下是否有问题,因为我看到原文底下有一堆不明代码... 上传头像, 使用wx.chooseI ...

微信小程序填坑之路（三）：布局适配方案（rpx、px、vw、vh）

rpx适配

vw、vh适配

微信小程序填坑之路（三）：布局适配方案（rpx、px、vw、vh）相关推荐

最新文章

热门文章