因为小程序是以微信为平台运行的,可以同时运行在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. Redis持久化从rdb切换到aof

    要求:不重启redis的情况下,将RDB数据切换到AOF数据中 准备,配置文件已支持RDB持久化 port 6379 daemonize yes pidfile /data/6379/redis.pi ...

  2. kubernetes-安装Helm

    Helm是什么? Helm可以管理Kubernetes应用程序-Helm Charts帮助您定义,安装和升级最复杂的Kubernetes应用程序. 下载Helm 在https://github.com ...

  3. LFS7.10——构造临时Linux系统

    参考:LFS编译——准备Host系统 前言 在准备好Host环境后,接下来构造一个临时Linux系统.该系统包含****构建所需要的工具.构造临时Linux系统分两步: 构建一个宿主系统无关的新工具链 ...

  4. Lock wait timeout分析

    ERROR 1205 (HY000): Lock wait timeout exceeded; try restarting transaction分析 1.4个用户连接数据库(A和D是本地回环登陆, ...

  5. c#中关于textbox换行

    要让一个Windows Form的TextBox显示多行文本就得把它的Multiline属性设置为true. 这个大家都知道,可是当你要在代码中为Text属性设置多行文本[的时候可能会遇到点麻烦:) ...

  6. idea 模板

    /** * @author sharplee * @version 1.0.0 * @ClassName ${PACKAGE_NAME}.${NAME} * @Description * @creat ...

  7. nginx 配置文件详解(转)

    #运行用户 #user nobody; #启动进程,通常设置成和cpu的数量相等或者2倍于cpu的个数(具体结合cpu和内存).默认为1 worker_processes 1; #全局的错误日志和日志 ...

  8. opencv摄像头读取图片

    # 摄像头捕获图像或视频import numpy as np import cv2 # 创建相机的对象 cap = cv2.VideoCapture(0) while(True): # 读取相机所拍到 ...

  9. Django 定时任务

    pip install apscheduler==2.1.2 安装完成后,打开django web 项目的views.py 增加以下内容: from apscheduler.scheduler imp ...

  10. top命令定位CPU高占用代码

    步骤如下: 1.使用top命令定位异常进程.可以看见12836的CPU和内存占用率都非常高 2.使用top -H -p 进程号查看异常线程 3.使用printf "%x\n" 线程 ...