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

微信小程序填坑之路（三）：布局适配方案（rpx、px、vw、vh）的更多相关文章

  1. 微信小程序填坑之路其一：wx.request发送与服务端接受

    一.序言 应公司要求要求,要用小程序开发一个信息录入系统.没办法只能听话来填坑. 先介绍一下环境:客户端——小程序:服务端——java:数据库——mysql:服务器——centos7 需求:客户端输入 ...

  2. 微信小程序填坑之路

    图片处理 三个小方法仅供参考1.将图片转成base64编码,可以使用代码来转换,当然我才不愿意特意写代码转,我懒,献上一个在线图片转base64的地址:http://tool.css-js.com/b ...

  3. [转]微信小程序填坑之路之使用localhost在本地测试

    本文转自:http://www.wxappclub.com/topic/798

  4. 微信小程序填坑之旅一（接入）

    一.小程序简介 小程序是什么? 首先“程序”这两个字我们不陌生.看看你手机上的各个软件,那就是程序.平时的程序是直接跑在我们原生的操作系统上面的.小程序是间接跑在原生系统上的.因为它嵌入在微信中,受微 ...

  5. 微信小程序填坑之旅

    一.解决scroll-view的滚动条问题 1.出现场景css. 有些场景下scroll-view是不需要滚动条的,比如顶部导航栏的横向滑动.而在单页的css样式中加入特定代码不能影响到全局的样式 2 ...

  6. 小程序填坑之路（二）：cover-view

    https://blog.csdn.net/mr_chen95/article/details/79261987 在一些情况下,我们需要对map.video.canvas.camera这些微信小程序的 ...

  7. 微信小程序填坑---小程序支付

    因为公司刚刚重新做了网站,所以也吧公众号和小程序提上了日程,在公众号里面没有什么问题,直接按照官方文档进行代码编写.调试,然后就解决了公众号内支付的问题. 因为小程序提供了<webview> ...

  8. 微信小程序填坑之旅（1）－app.js中用云开发获取openid,在其他页上用app.globaldata.openid获取为空

    参考:小程序如何在其他页面监听globalData中值的变化?https://www.jianshu.com/p/8d1c4626f9a3 原因就是:app.js没执行完时,其他页已经onload了, ...

  9. 微信小程序填坑之page[pages/XXX/XXX] not found.May be caused by

    当页面出现   page[pages/XXX/XXX] not found.May be caused by :1. Forgot to add page route in app.json.2. I ...

随机推荐

  1. linux 命令 wc

    语法:wc [选项] 文件… 说明:该命令统计给定文件中的字节数.字数.行数.如果没有给出文件名,则从标准输入读取.wc同时也给出所有指定文件的总统计数.字是由空格字符区分开的最大字符串. (1) 统 ...

  2. Nginx 安装 和 特性介绍

    一:nginx 环境搭建 四项确认 确认系统网络可通行 确认yum可用 确认关闭iptables规则 确认停用selinux 查看iptables规则 iptables -L 关闭iptables规则 ...

  3. 这个在Github有52100颗星星的项目，怎么还有人不知道鸭！

    Ta是近两年Docker最为火热的开源项目之一.Docker 开启了容器时代,而Ta则革新了我们对于云计算,软件开发流程,业务平台等等方面的认知. Ta就是Kubernetes,/k(j)uːbəˈn ...

  4. GlusterFS分布式存储系统

    一,分布式文件系统理论基础 1.1 分布式文件系统出现 计算机通过文件系统管理,存储数据,而现在数据信息爆炸的时代中人们可以获取的数据成指数倍的增长,单纯通过增加硬盘个数来扩展计算机文件系统的存储容量 ...

  5. Visual Studio C# 利用git和github协同开发时产生冲突的解决办

    Visual Studio C# 利用git和Github协同开发时产生冲突的解决办法 前言:在前两天的助教作业中,发现了自己没有办法解决在用vs开发C#的窗体项目的过程中产生的冲突问题,在查阅了资料 ...

  6. Codeforces #496 (Div. 3) Polycarp and Div 3

    思路1: https://blog.csdn.net/qq_41730082/article/details/80984316 题目的意思是给你一串数字长度为(1-2e5),当然由于它的这一串数字是不 ...

  7. 匿名函数、sorted()、filter()、map()、递归

    一.匿名函数 1.lambda 匿名函数 方法 lambda 参数:返回值 (函数名统一叫lambda) def func(n): return n**2 print(func(3)) #这是一个普通 ...

  8. P2085 最小函数值[优先队列]

    题目描述 有n个函数,分别为F1,F2,...,Fn.定义Fi(x)=Ai*x^2+Bi*x+Ci (x∈N*).给定这些Ai.Bi和Ci,请求出所有函数的所有函数值中最小的m个(如有重复的要输出多个 ...

  9. PHP启动php-fpm成功,但php-cgi进程查找不到 502 getaway

    一般情况大家刚把lnmp环境安装好之后,把nginx中 fastcgi_pass unix:/tmp/php-cgi.sock项修改成 fastcgi_pass 127.0.0.1:9000之后,网页 ...

  10. Python Django 版本对应表