微信小程序不同机型的兼容布局解决
因为小程序是以微信为平台运行的,可以同时运行在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-->终端 ...
随机推荐
- 18,flask项目中使用celery
导包: from celery import Celery from celery.result import AsyncResult app.config['CELERY_BROKER_URL'] ...
- c# MemoryStream 类
- Linux查找工具locate和find
linux 中有很多查找工具,今天主要讲解locate,find两个工具. 一.locate 1.性能介绍 非实时查找(数据库查找):locate 查询系统上预建的文件索引数据库 /var/lib/m ...
- 【HCIA Gauss】学习汇总-数据库管理(数据库基本概念)-3
数据库:操作系统文件或磁盘数据块的集合数据库实例: 指操作系统中一系列进程以及为这些进程分配的内存块 通常来说一个数据库实例对应着一个数据库[数据库实例是访问数据的通道] 多实例:利用多实例 可以充分 ...
- django框架介绍安装-自写框架
原文链接:https://www.cnblogs.com/maple-shaw/p/8862330.html Web框架本质 我们可以这样理解:所有的Web应用本质上就是一个socket服务端,而用户 ...
- 2013.6.28 - KDD最后一天
今天收到中秋的邮件.KDD结果出来了,Zhongqiu Wang & Jingwen Huang 15th/561.
- Spring4- 01 - Spring框架简介及官方压缩包目录介绍- Spring IoC 的概念 - Spring hello world环境搭建
一. Spring 框架简介及官方压缩包目录介绍 主要发明者:Rod Johnson 轮子理论推崇者: 2.1 轮子理论:不用重复发明轮子. 2.2 IT 行业:直接使用写好的代码. Spring 框 ...
- P1801 黑匣子[堆]
题目描述 Black Box是一种原始的数据库.它可以储存一个整数数组,还有一个特别的变量i.最开始的时候Black Box是空的.而i等于0.这个Black Box要处理一串命令. 命令只有两种: ...
- mysql 截取字符串 函数
文章摘取自http://www.cnblogs.com/zdz8207/p/3765073.html 练习截取字符串函数(五个) mysql索引从1开始 一.mysql截取字符串函数 1.left(s ...
- GITHUB下载ANDRIOD源码
1 git clone https://android.googlesource.com/device/common.git 2 git clone https://android.googlesou ...