因为小程序是以微信为平台运行的,可以同时运行在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. tomcat运行一段时间出“org.apache.coyote.http11.Http11Processor.service Error parsing HTTP request header”

    试了好多种方法,貌似还是没有解决问题,不过也学到了点东西,记录下备忘吧. 异常详情: 1.首先看到最多的就是说在server.xml中的Connector中添加maxHttpHeaderSize=&q ...

  2. [ipsec][strongswan] 使用VTI配置基于路由的ipsec

    之前写的一个:[dev][ipsec] 基于路由的VPrivateN 一 我们默认用strongswan的时候基于策略的. 也就是policy. 基于策略的ipsec中, policy承担了两部分功能 ...

  3. [LeetCode]1252. Cells with Odd Values in a Matrix

    Given n and m which are the dimensions of a matrix initialized by zeros and given an array indices w ...

  4. shell文件比较运算符

    1.文件比较运算符 -e filename 如果 filename 存在,则为真 [ -e /var/log/syslog ] -d filename 如果 filename 为目录,则为真 [ -d ...

  5. 移动App性能评测与优化-Android内存测试 ,DVM原理

    常见的测试方法包括Monkey/UIAutomator类的常规压力测试,大数据/操作的峰值压力测试,长时间运行的稳定性测试等. 前提: 测试准备:版本是纯净版本,不应该附加多余的log和调试用组件. ...

  6. test20190826 NOIP2019 模拟赛

    100+100+40=240.我觉得如果没做过第三题考场上却能想出来的都是神仙. 基因突变 [问题描述] 邪恶的 707 刚刚从白垩纪穿越回来,心中产生了一个念头:我要统治人类! 但是统治人类是很庞大 ...

  7. 从http简介到网络分层及web架构

    浏览器发起HTTP请求的典型场景 a stateless application-level request/response protocol that uses extensible semant ...

  8. map json 字符串 对象之间的相互转化

    1.对象与字符串之间的互转 将对象转换成为字符串 String str = JSON.toJSONString(infoDo); 字符串转换成为对象 InfoDo infoDo = JSON.pars ...

  9. learning java AWT 常见组件

    import javax.swing.*; import java.awt.*; public class CommonComponent { Frame f = new Frame("te ...

  10. 【数论】P1029 最大公约数和最小公倍数问题

    题目链接 P1029 最大公约数和最小公倍数问题 思路 如果有两个数a和b,他们的gcd(a,b)和lcm(a,b)的乘积就等于ab. 也就是: ab=gcd(a,b)*lcm(a,b) 那么,接下来 ...