因为小程序是以微信为平台运行的,可以同时运行在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就已经足够使用了,所以它们的出场机会很少。

微信小程序不同机型的兼容布局解决的更多相关文章

  1. 图解微信小程序---scroll_view实现首页排行榜布局

    图解微信小程序---scroll_view实现首页排行榜布局 什么是scroll-view? 滚动视图可滚动视图区域.使用竖向滚动时,需要给scroll-view一个固定高度,通过 WXSS 设置 h ...

  2. 微信小程序https发起请求失败的解决方法

    https://blog.csdn.net/yuhui123999/article/details/60572888 https://blog.csdn.net/yuhui123999/article ...

  3. 微信小程序访问豆瓣电影api400错误解决方法

    最近在跟着demo学习微信小程序,却卡在了第一步请求豆瓣电影api上,折腾了很久,代码如下: wx.request({ url : "https://api.douban.com/v2/mo ...

  4. 开发微信小程序 中遇到的坑 及解决方法

    1.wx.request 只能访问 https 解决: 新建项目  不填appid  即可访问 localhost 2.页面中多重三元表达式  解析有问题 解决: <!--{{index}} { ...

  5. 微信小程序前置课程:flex布局(二)

    原文:http://www.ruanyifeng.com/blog/2015/07/flex-examples.html 上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到 ...

  6. 微信小程序前置课程:Flex 布局教程(一):语法篇

    原文:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool 网页布局(layout)是CSS的一个重点 ...

  7. 微信小程序iPhone X空白兼容

    开局一张图…… 看看这空白的地方多丑 ~ 接下来就是见证奇迹的时刻(上代码) //app.js App({ onLaunch: function (ops) { if (ops.scene == 10 ...

  8. 微信小程序,内容组件中兼容的H5组件

    受信任的HTML节点及属性 全局支持class和style属性,不支持id属性. 节点 属性 a   abbr   address   article   aside   b   bdi   bdo ...

  9. 微信小程序-没有找到 node_modules 目录的解决办法

    初次在微信开发者工具构建npm 没有找到 node_modules 目录的解决办法 第一步:设置-->项目设置-->使用npm模块 第二步:右键目录下miniprogram-->终端 ...

随机推荐

  1. Elasticsearch 7.x - IK分词器插件(ik_smart,ik_max_word)

    一.安装IK分词器 Elasticsearch也需要安装IK分析器以实现对中文更好的分词支持. 去Github下载最新版elasticsearch-ik https://github.com/medc ...

  2. 基于k8s集群部署prometheus监控etcd

    目录 基于k8s集群部署prometheus监控etcd 1.背景和环境概述 2.修改prometheus配置 3.检查是否生效 4.配置grafana图形 基于k8s集群部署prometheus监控 ...

  3. Lock wait timeout分析

    ERROR 1205 (HY000): Lock wait timeout exceeded; try restarting transaction分析 1.4个用户连接数据库(A和D是本地回环登陆, ...

  4. JAVA 的8种基本数据类型

    整型 int 一般的数据 long 极大的数据 short 用于特定的场合,比如底层的文件处理或者需要控制占用存储单元空间量的大数组 byte 用于特定的场合,比如底层的文件处理或者需要控制占用存储单 ...

  5. 让Jupyter Notebook个性化

    Win下更改jupyter主题 Themes地址 本人环境  Win+Conda 开始使用pip 安装,发现无法使用pip,修改环境变量,将D:\Program Files\Conda\Scripts ...

  6. Kotlin泛型与协变及逆变原理剖析

    在上一次https://www.cnblogs.com/webor2006/p/11234941.html中学习了数据类[data class]相关的知识,这次会学习关于泛型相关的东东,其中有关于泛型 ...

  7. python 程序练习题

    1.实现isOdd(),参数为整数,如果整数为奇数,返回True,否则返回Flase 代码如下: def isOdd(a): if a%2==0: return False else: return ...

  8. 题解 洛谷P2189 【小Z的传感器】

    这题就是考察什么时候建边,貌似和搜索没有半毛钱关系\(qwq\) 首先没有传感器的房间是可以随便走来走去的,因为我们不用考虑顺序.于是就考虑先把这些点的相互的边给建起来. 接下来分析一波,对于第\(i ...

  9. SVM: 用kernels(核函数)来定义新的features,避免使用多项式,高斯kernel

    应用kernels来进行非线性分类 非线性分类:是否存在好的features的选择(而不是多项式)--f1,f2,f3.... 上图是一个非线性分类的问题,前面讲过,我们可以应用多项式(feature ...

  10. windows 使用SVN命令

    在不用安装TortoiseSVN客户端的情况,大家可以再http://subversion.apache.org/packages.html#windows 找到windows下的svn客户端工具.选 ...