微信的 rpx
微信小程序新单位rpx与自适应布局
rpx是微信小程序新推出的一个单位,按官方的定义,rpx可以根据屏幕宽度进行自适应,在rpx出现之前,web页面的自适应布局已经有了多种解决方案,为什么微信还捣鼓出新的rpx单位?在解释这个单位前,我们先简单了解一下目前的主流的自适应布局解决方案:
rem
流式布局
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的设计稿写代码即可,不必担心它在各个平台的适配情况,实际上在各个平台都会长得一样,从此妈妈再也不用担心我的页面适配问题啦。
参考链接:
微信的 rpx的更多相关文章
- 微信小程序新单位rpx与自适应布局
rpx是微信小程序新推出的一个单位,按官方的定义,rpx可以根据屏幕宽度进行自适应,在rpx出现之前,web页面的自适应布局已经有了多种解决方案,为什么微信还捣鼓出新的rpx单位?在解释这个单位前,我 ...
- 微信小程序开发 [06] 一些补充的知识点
0.写在前面的话 前几章的内容串联起来,基本上已经能写比较基础的小程序页面逻辑了,当然,wxml和wxss的我并没有写,因为前端我也并不擅长.这个章节,准备随便叨叨,然后补充一些之前没有提到的基础知识 ...
- Alpha冲刺5
前言 队名:拖鞋旅游队 组长博客:https://www.cnblogs.com/Sulumer/p/9989898.html 作业博客:https://edu.cnblogs.com/campus/ ...
- Alpha冲刺一 (5/10)
前言 队名:拖鞋旅游队 组长博客:https://www.cnblogs.com/Sulumer/p/9989898.html 作业博客:https://edu.cnblogs.com/campus/ ...
- 微信小程序中rpx与rem单位使用
原作者: 小小小 来自: 授权地址 本文讲解rpx和rem应用于微信小程序,如果你还没有入门,建议先从下面看起: 微信小程序官方文档web app变革之remrpx单位官方文档rpx单位基础介绍 ...
- 第二篇、微信程序尺寸rpx
微信小程序尺寸单位rpx以及样式相关介绍rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应.规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750 ...
- 【微信小程序】rpx尺寸单位的应用
前言:微信小程序中的rpx尺寸单位用起来很方便.他是怎么实现计算的呢?(这里要注意的是,常规浏览器解析css代码的时候会把font-size小于12px的字体转成12px,不会让他小于12px的,而微 ...
- 微信小程序中的rpx与移动设备物理像素
如下图: pt也称逻辑像素点,px物理像素点,1pt等于2px或者3px或更多; iphone6下面0.5pt=1px=1rpx; 使用rpx,小程序在不同设备分辨率下自行转换: PPI=物理像素开根 ...
- WebStorm微信小程序单位rpx出现空格问题
Windows先下载sed 配置Tools->File Watchers->+ 添加下图配置 //windows系统 -i s/"\ rpx"/rpx/g $FileP ...
随机推荐
- CHUCK手把手带你搞定OPENSTACK
一.OpenStack初探 1.1 OpenStack简介 OpenStack是一整套开源软件项目的综合,它允许企业或服务提供者建立.运行自己的云计算和存储设施.Rackspace与NASA是最初重要 ...
- TCP通讯模型简单示例
1. TCP通讯模型 2. 服务器端 ① 创建socket,用函数socket() ② 绑定IP地址.端口号等信息到socket上,用函数bind() ③ 设置允许的最大连接数,用函数listen() ...
- 5.SpringMVC
1.SpringMVC概述 概述: SpringMVC是基于请求驱动,围绕一个核心Servlet 转发请求到对应的Controller而设计的优点:是一个典型的教科书式的MVC构架,易学易用提供了清晰 ...
- C++标准库vector及迭代器
vector是同一种对象的集合,每个对象都有一个对应的整数索引值.和string对象一样,标准库将负责管理与存储元素相关的类存.引入头文件 #include<vector> 1.vecto ...
- hbase数据库操作
.实验内容与完成情况:(实验具体步骤和实验截图说明) (一)编程实现以下指定功能,并用 Hadoop 提供的 HBase Shell 命令完成相同任务: () 列出 HBase 所有的表的相关信息,例 ...
- firewall 端口转发
centos 7 使用背景:某次新购阿里云服务器安装nginx后配置80转8080的内部转发 systemctl status firewalld ---查看守护进程状态systemctl start ...
- JS你可能还不知道的一些知识点(一)
js程序是用Unicode字符集编写的, 2.转义字符:反斜线 1 2 3 4 function Test(){ var s='you\'re right,it can\'t be a quote ...
- RTT设备与驱动之PWM
这里将PWM当成一个设备:PWM简介 上图是一个简单的 PWM 原理示意图,假定定时器工作模式为向上计数,当计数值小于阈值时,则输出一种电平状态,比如高电平,当计数值大于阈值时则输出相反的电平状态,比 ...
- 3d Max 2015安装失败怎样卸载3dsmax?错误提示某些产品无法安装
AUTODESK系列软件着实令人头疼,安装失败之后不能完全卸载!!!(比如maya,cad,3dsmax等).有时手动删除注册表重装之后还是会出现各种问题,每个版本的C++Runtime和.NET f ...
- C#:新邮件监听及搜索
在项目中,我们需要监听邮件服务器,看是否有新的邮件进入.下面的代码可以帮助我们监听新邮件,并对已有的邮件进行查找: using System; using System.Collections.Gen ...