文档章节

微信小程序新单位rpx与自适应布局

x
 xushuxing
发布于 2017/02/07 15:23
字数 951
阅读 50
收藏 0

微信小程序新单位rpx与自适应布局

rpx是微信小程序新推出的一个单位,按官方的定义,rpx可以根据屏幕宽度进行自适应,在rpx出现之前,web页面的自适应布局已经有了多种解决方案,为什么微信还捣鼓出新的rpx单位?在解释这个单位前,我们先简单了解一下目前的主流的自适应布局解决方案:

  1. 响应式(Responsive web design)

  2. rem

  3. 流式布局

  4. scale伸缩布局

响应式

响应式布局的问题在于需要维护多个样式文件,维护成本太大,一般的移动H5页面都不会优先考虑。

rem

rem是近几年比较流行的方案,淘宝移动web端就是采用此方案,由于1rem=根元素font-size,所以rem布局的本质就是通过rem把页面按比例分割达到自适应的效果,因为rem是相对根路径font-size尺寸,不同的页面设置不同的font-size尺寸,即可达到自适应的效果。为了方便理解,我写了一个简单的rem布局demo,通过设置

1

document.documentElement.style.fontSize = window.innerWidth + 'px';

然后设置<div class="box"></div>的宽高等于1rem,就可以使box的宽高自适应各种设备尺寸。因为box的单位1em是跟页面设备的宽对应的,所以能做到自适应各种尺寸。

流式布局

流式布局需要用到百分比或者flex,即宽度永远铺满页面宽度,但高度和其他单位仍然用px。我个人比较推荐用流式布局,因为流式布局不需要像rem那样额外通过js动态调整根元素的字体尺寸。虽然某些大屏幕下,无法100%还原设计稿,但这也是流式布局的精髓,它的字体精度可以保持跟设备系统一致(dpi)。

scale伸缩布局

scale伸缩布局顾名思义,就是通过拉伸缩小页面来达到自适应。有两种方法,一是通过js更改viewport的initial-scale,这种方法比较麻烦,另一种是直接写死viewport的宽度,例如:

1

<meta name="viewport" content="width=360, user-scalable=no">

意思就是告诉浏览器:这个页面我要一直用360px的宽度处理,在不同的尺寸上,麻烦伸缩一下。假如在320的iphone上,放大到360,在375的iphone上,缩小到360。这样我只需要以360这个尺寸出设计稿就行,页面会伸缩适应。实际效果可以通过手机访问:scale伸缩demo。scale伸缩的问题在于,不能显式设置minimum-scale=1.0,否则就达不到效果。而这个值是chromium37以上的webview触发gpu raster的一个条件,所以用这种方法就没法利用gpu raster硬件加速。

rpx布局

上面四个方法,各有优缺点,现在回头看看微信的rpx,相信大家已经有所启发,rpx实际上就是系统级的rem(把页面按比例分割750份,1rpx=window.innerWidth/750),或者scale伸缩布局的width=750。也就是说,微信小程序的rpx布局帮大家把rem布局的js设置根元素字体尺寸这步省了,或者减少了scale伸缩布局不能开启gpu raster的问题。

通过rpx,大家只需要根据750的设计稿写代码即可,不必担心它在各个平台的适配情况,实际上在各个平台都会长得一样,从此妈妈再也不用担心我的页面适配问题啦。

 

参考链接:

  1. https://www.chromium.org/developers/design-documents/chromium-graphics/how-to-get-gpu-rasterization

  2. https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxss.html

本文转载自:http://www.cnblogs.com/babyzone2004/p/5979198.html

共有 人打赏支持
x
粉丝 0
博文 10
码字总数 0
作品 0
海淀
移动端自适应布局&微信小程序rpx

rpx是微信小程序推出的一个新单位,通过rpx可以让我们的页面根据屏幕宽度进行自适应,这一举措解决了一直令前端头疼的屏幕适配问题。 而在rpx出现之前,web页面的自适应布局已经有前人总结了...

小草先森
06/16
0
0
mpvue系列(二):新建页面、页面跳转、自适应单位

1、mpvue怎么新建页面? (1)粘贴复制一个页面文件夹,只需要改文件夹名- 文件名不需要改,main.js里的东西不用动。export default里更改局部顶部栏配置。 (2)index.vue里面可以更改内容。...

醉虾不醉
06/13
0
0
分享几个微信小程序开发框架和工具

###【小程序开发框架】 1、官方框架MINA 小程序提供的开发框架为MINA框架,它类似于淘宝Weex、Vue框架。MINA框架通过封装微信客户端提供的文件系统、网络通信、任务管理、数据安全等基础功能...

codeGoogle
04/18
0
0
微信战狼计划之小程序开发教程 全集百度云下载

微信战狼计划之小程序开发教程 全集百度云下载 小程序开发教程,需要的可以下载下来看看, 相关教程目录: 43 第三方代码的调试.mp4 7.8M2018-01-30 16:08 42 block标签.mp4 7.5M2018-01-30...

dsakura
04/21
0
0
基于px2rpx-loader,探讨一下loader的封装思想

本文以px2rpx-loader的源码为学习对象,了解其工作机制以及loader封装的思想。 1.前言 最近在了解mpvue框架的时候,对于其能够实现一套代码兼容web和微信小程序(以下简称小程序)的能力十分...

知道创宇云安全
07/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

iOS开发用到的图片尺寸汇总

启动图 型号 竖屏 横屏 iPhone SE 640px × 1136px 1136px × 640px iPhone 6s 750px × 1334px 1334px × 750px iPhone 6s Plus 1242px × 2208px 2208px × 1242px iPhone 7 750px × 1334......

业界小白
25分钟前
0
0
浅谈redis

redis是一个开源,内存式的健值存储数据库,也被称为健值存储的字典服务器。健值类型有字符串,hash(哈希类型),set(集合),list(列表) 和有序集合 特征细节: 内存式:redis将健值存储在主...

拐美人
33分钟前
0
0
无限扩容,按需使用!ZStack推出基于阿里云NAS的文件存储服务

日前,ZStack发布2.6.0版本,正式宣布推出基于阿里云NAS的文件存储服务。得益于业界领先的阿里云分布式存储架构,融合NAS后的ZStack 2.6.0拥有高性能、高可靠、容量无限扩展、一键操作、按需...

ZStack社区版
35分钟前
1
0
崛起于Springboot2.X之Mongodb多数据源处理(35)

多数据源:4个mongodb库! 目录结构图: 1、添加pom依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-mongodb</artifactId>......

木九天
41分钟前
0
0
如何获取显示器的EDID信息

Q1: 为什么要写这篇文章? A1:在最近的工作中遇到了不少问题,其中很多都是和EDID相关的。可以说,作为一家以“显示”为生的企业,我们时时刻刻在与EDID打交道。EDID这东西很简单,但是如果...

DB_Terrill
41分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部