微信小程序不同机型的兼容布局解决
因为小程序是以微信为平台运行的,可以同时运行在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-->终端 ...
随机推荐
- Type mismatch: cannot convert from element type Object to String 解决办法
首先放上我的源码,看看你的代码是不是我这个类似的. @Test void predicateTest() throws Exception { List<String> languages ...
- [MySQL] 行级锁SELECT ... LOCK IN SHARE MODE 和 SELECT ... FOR UPDATE
一.译文 翻译来自官方文档:Locking Reads If you query data and then insert or update related data within the same ...
- IDEA实用教程(十)—— 配置Maven的全局设置
使用之前需要提前安装好Maven 第一步 第二步
- SQl Server 数据库多表连接
[缘由] 为了防止数据的冗余,我们会将数据库中表进行拆分,这样就产生了多张表,表与表之间通过主外键关联,但这样又造成了我们查找和修改的困难,如何进行多表之间的查找呢? 我们将一个查询同时设计两个或两个 ...
- asp、aspx、php、jsp万能密码大全【笔记】
asp aspx万能密码 1:"or "a"="a 2: ')or('a'='a 3:or 1=1-- 4:'or 1=1-- 5:a'or' 1=1-- 6: ...
- 神经网络(4)---神经网络是如何帮助我们学习复杂的nonlinear hypotheses
神经网络是如何一步步进行计算的,以及对计算过程的向量化 Z1(2),Z2(2),Z3(2) are just weighted linear combination of input value x1 ...
- Python——python3的requests模块的导入
前言 突然就要搞python,我这个心哦~ 版本 | python 3.7 步骤 配置环境变量 右击-->属性-->打开文件位置 进入到脚本目录: C:\Users\Administrat ...
- Spring Boot MyBatis 通用Mapper 自动生成代码
一.在pom.xml文件中进入mybatis自动生成代码相关的jar包: 注意: <configurationFile>标签中配置的是“generatorConfig.xml”文件位置. ...
- Hibernate的持久化对象
Hibernate的持久化类 什么是持久化类 1. 持久化类:就是一个Java类(咱们编写的JavaBean),这个Java类与表建立了映射关系就可以成为是持久化类. * ...
- HiveQL Index 索引
Hive只有有限的索引功能.Hive中没有普通关系型数据库中键的概念,但是还是可以对一些字段建立索引来加速某些操作.一张表的索引数据存储在另外一张表中. 通过explain命令可以查看某个查询语句是否 ...