微信小程序不同机型的兼容布局解决
因为小程序是以微信为平台运行的,可以同时运行在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就已经足够使用了,所以它们的出场机会很少。
微信小程序不同机型的兼容布局解决的更多相关文章
- 图解微信小程序---scroll_view实现首页排行榜布局
图解微信小程序---scroll_view实现首页排行榜布局 什么是scroll-view? 滚动视图可滚动视图区域.使用竖向滚动时,需要给scroll-view一个固定高度,通过 WXSS 设置 h ...
- 微信小程序https发起请求失败的解决方法
https://blog.csdn.net/yuhui123999/article/details/60572888 https://blog.csdn.net/yuhui123999/article ...
- 微信小程序访问豆瓣电影api400错误解决方法
最近在跟着demo学习微信小程序,却卡在了第一步请求豆瓣电影api上,折腾了很久,代码如下: wx.request({ url : "https://api.douban.com/v2/mo ...
- 开发微信小程序 中遇到的坑 及解决方法
1.wx.request 只能访问 https 解决: 新建项目 不填appid 即可访问 localhost 2.页面中多重三元表达式 解析有问题 解决: <!--{{index}} { ...
- 微信小程序前置课程:flex布局(二)
原文:http://www.ruanyifeng.com/blog/2015/07/flex-examples.html 上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到 ...
- 微信小程序前置课程:Flex 布局教程(一):语法篇
原文:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool 网页布局(layout)是CSS的一个重点 ...
- 微信小程序iPhone X空白兼容
开局一张图…… 看看这空白的地方多丑 ~ 接下来就是见证奇迹的时刻(上代码) //app.js App({ onLaunch: function (ops) { if (ops.scene == 10 ...
- 微信小程序,内容组件中兼容的H5组件
受信任的HTML节点及属性 全局支持class和style属性,不支持id属性. 节点 属性 a abbr address article aside b bdi bdo ...
- 微信小程序-没有找到 node_modules 目录的解决办法
初次在微信开发者工具构建npm 没有找到 node_modules 目录的解决办法 第一步:设置-->项目设置-->使用npm模块 第二步:右键目录下miniprogram-->终端 ...
随机推荐
- flask 扩展包
1.pipenv install python-dotenv (管理项目环境变量): 2.pipenv install watchdog --dev(监测文件变动,一般开发时使用): 3.pipen ...
- kubeadm添加新master或node
一.首先在master上生成新的token kubeadm token create --print-join-command [root@cn-hongkong nfs]# kubeadm toke ...
- python面试总结2(函数常考题和异常处理)
python函数常考题 可变类型为参数 不能类型为参数 python如何传递参数 传递值还是引用呢?都不是.唯一支持的参数传递是共享穿参 Call by Object(Call by Object R ...
- consul-服务发现、服务隔离、服务配置
一.服务发现 服务发现组件记录了(大规模)分布式系统中所有服务的信息,其它服务可以据此找到这些服务.DNS 就是一个简单的例子.当然,复杂系统的服务发现组件要提供更多的功能,例如,服务元数据存储.健康 ...
- 洛谷 P1020导弹拦截题解
洛谷链接:https://www.luogu.org/problem/P1020 题目描述 某国为了防御敌国的导弹袭击,发展出一种导弹拦截系统.但是这种导弹拦截系统有一个缺陷:虽然它的第一发炮弹能够到 ...
- PHP实现DES/ECB/PKCS5Padding加密兼容Java SHA1PRNG算法
在使用php调用java接口时,遇到了两边加密结果不一致的问题.经过沟通发现接口方使用了SHA1PRNG算法,对原密码计算后做为Des的加密Key. 因此在php中也需要先对原密码做相应计算才能保持结 ...
- Redis与Python的交互
驱动模块 redis模块用来在Python环境下驱动Redis数据库 可以直接用pip方式安装 pip install redis 或者国内镜像下载: pip install -i https://p ...
- zookeeper先验知识(2PC+paxos)
一.2PC两阶段提交: 在分布式事务中,每个机器节点只能够明确知道自己事务操作的结果,是成功还是失败,而无法获取其他分布式节点的操作结果,因此在事务操作需要跨多个分布式节点时,需要引入一个协调者统一调 ...
- HDU6072 Logical Chain
题意:动态修改图 \(G\) 的边集,求每次修改后的 \(\sum c\times (c−1) / 2\) (记每个强连通分量中的点数量为 \(c\) ).其中修改操作共 \(m\) 次,每次最多改 ...
- 2019.11.29 Mysql的数据操作
为名为name的表增加数据(插入所有字段) insert into name values(1,‘张三’,‘男’,20); 为名为name的表增加数据(插入部分字段) insert into name ...