因为小程序是以微信为平台运行的,可以同时运行在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. 1.1“Linux操作系统”部署

    ---恢复内容开始--- 1.2.1 版本说明 操作系统版本:CentOS6.5 64位 1.2.2 部署条件说明 无 1.2.3 部署步骤说明 centos6.5 操作系统安装 1.创建虚拟机 2. ...

  2. PTA-多项式A除以B

    多项式A除以B 这仍然是一道关于A/B的题,只不过A和B都换成了多项式.你需要计算两个多项式相除的商Q和余R,其中R的阶数必须小于B的阶数. 输入格式: 输入分两行,每行给出一个非零多项式,先给出A, ...

  3. ARP欺骗之ettercap图形化界面

    ARP欺骗原理: 在每台主机中都有ARP缓存表,缓存表中记录了IP地址与MAC地址的对应关系,而局域网数据传输依靠的是MAC地址(网络设备之间互相通信是用MAC地址而不是IP地址) 一.ARP欺骗 工 ...

  4. Multiple network matches found for name 'selfservice', use an ID to be more specific.报错

    今天正在做openstack实例时输入neutron subnet-create --name selfservice   --dns-nameserver 114.114.114.114 --gat ...

  5. CH6302 雨天的尾巴

    6302 雨天的尾巴 0x60「图论」例题 背景 深绘里一直很讨厌雨天. 灼热的天气穿透了前半个夏天,后来一场大雨和随之而来的洪水,浇灭了一切. 虽然深绘里家乡的小村落对洪水有着顽固的抵抗力,但也倒了 ...

  6. [Wc2011] Xor 和 [HNOI2011]XOR和路径

    Xor F.A.Qs Home Discuss ProblemSet Status Ranklist Contest 入门OJ ModifyUser  autoint Logout 捐赠本站 Prob ...

  7. NET Framework 的泛型

    NET Framework 的泛型 泛型是具有占位符(类型参数)的类.结构.接口和方法,这些占位符是类.结构.接口和方法所存储或使用的一个或多个类型的占位符.泛型集合类可以将类型参数用作它所存储的对象 ...

  8. 如何获取一个Java对象所占内存大小

    新建一个maven工程 我们先在IDEA中新建一个名为ObjectSizeFetcherAgent的maven工程,如下图: 在maven项目中的pom.xml中新增一个打jar包的插件,如下: &l ...

  9. 面试官常问的20道Java题目(附答案)-来自Java1234

    1. 以下代码的输出结果是(A) int i =3; i = i++; System.out.println(i); A .3  B.4  C.5 a=b++是先将b值赋值给a后b再自增. 2. Ma ...

  10. Tensorflow细节-P194-组合训练数据

    import tensorflow as tf files = tf.train.match_filenames_once("data.tfrecords-*") filename ...