【小程序】rpx（responsive pixel）自适应像素浅析

rpx全称responsive pixel，即自适应像素，是WXSS（Weixin Style Sheet）微信样式表的尺寸单位。

我们都知道px是像素，前端写样式时用的最多的尺寸单位也是px，那rpx又是什么？它有什么用？

首先，小程序的运行环境包括手机、平板等终端设备，这些设备的显示屏尺寸大小都是不同的。

这就引出一个问题，如何让小程序运行在各种大小不一的设备中时，页面布局比例保持一致？

我们先来看下，当使用px作为尺寸单位时，同一个页面在不同设备中的表现。

<!--pages/home.wxml-->
<view><image src="/images/cover-{{ index }}.jpg" wx:for="{{ 3 }}" wx:key="index"></image>
</view>

/* pages/home.wxss */
view{width: 100%;height: 170px;background-color: rgb(248, 245, 245);
}
view image{width: 110px; height: 150px;padding: 10px 5px;
}

从上图可以看到，该页面在iphoneX中的显示效果是正常的，屏幕宽度刚好放下3张海报；

换成分辨率大一点的iphone XS Max时，海报右边出现了较大的空白区域；

而换成分辨率更大的ipad时，空白区域占满了屏幕宽度的一半。

很显然，如果页面不能根据用户设备的分辨率自动进行相应调整的话，这不仅会造成页面布局的混乱，还会极大地降低用户体验。

为此，小程序给出的解决方案就是rpx，自适应像素。

那么自适应像素实现页面自适应屏幕的原理是什么？

之所以要对页面进行自适应调整，正是因为设备的屏幕大小不同，那只要统一屏幕的尺寸，问题不就解决了吗？

但由于现实原因，在物理上统一尺寸是不可能的，为此，一个统一的虚拟尺寸诞生了。

rpx规定，屏幕宽为750rpx，这里的“屏幕”指的是，所有不同分辨率的设备，它们的宽度都是统一的750rpx。

就这样，尽管在物理层面，设备的屏幕宽度各不相同，但它们都有一个相同的虚拟宽度，就是750rpx。

统一了尺寸，接下来就是如何将物理尺寸转换为相应的虚拟尺寸的问题了。只需用屏幕宽度 / 虚拟宽度，即可得到物理尺寸与虚拟尺寸的比例。

例如iphone X的屏幕宽度为375px，375 / 750 = 0.5，所以iphone 6的物理/虚拟尺寸比为1：2，换句话说，运行在iphone X的页面，1rpx = 0.5px，1px = 2rpx。

同理可推，屏幕宽度为414px的iphone XS Max，1rpx = 0.552px，1px = 1.81rpx。

知道了px和rpx之间的换算方式，我们来修改一下开头那个页面的样式表，实现与设备无关的自适应页面。

使用iphone X作为视觉稿的标准，因此1px = 2rpx，稍加修改，得到以下代码：

/* pages/home.wxss */
view{width: 100%;height: 340rpx;  /* height: 170px; */background-color: rgb(248, 245, 245);
}
view image{width: 220rpx;  /* width: 110px; */ height: 300rpx; /* height: 150px; */padding: 20rpx 10rpx; /* padding: 10px 5px; */
}

显而易见地，使用rpx作为尺寸单位后，页面在不同设备中实现了自适应。

为方便换算，建议使用屏幕宽度为375px的iphone X作为视觉稿的标准，因为1px = 2rpx。

【小程序】rpx（responsive pixel）自适应像素浅析相关推荐

uniapp 关于小程序图片高度不能自适应的问题[widthFix]
uniapp 关于小程序图片高度不能自适应的问题[widthFix] 小程序的 Image 图片实现宽度为100%或设置成某个rpx的值时,高度自适应要怎样设置? HTML 设置 mode=" ...
php展示微信图片尺寸,微信小程序实现image图片自适应宽度
本文主要和大家分享微信小程序实现image图片自适应宽度,希望能帮助到大家,首先我们先来了解一下image组件. 一.了解image组件由于image有默认的固定的宽度和高度,这样我们在做图片自适应 ...
微信小程序轮播图片自适应
微信小程序轮播图片自适应 //xml代码 <view class="rotation"><swiper class="home-swiper" ...
小程序源码：自适应来电模拟器
模拟一个来电电话,可以正常接通,挂断等让你假装有事,迅速离场,避免尴尬等等! 比如使用场景: 相亲的时候遇到奇葩,想找接口离开. 场价party想脱身的时候或者恶搞,遇到坏人等等各种场景都可以使用 ...
小程序源码：自适应来电模拟器-多玩法安装简单
模拟一个来电电话,可以正常接通,挂断等让你假装有事,迅速离场,避免尴尬等等! 比如使用场景: 相亲的时候遇到奇葩,想找接口离开. 场价party想脱身的时候或者恶搞,遇到坏人等等各种场景都可以使用 ...
小程序rpx 以及rem和px的换算
小程序rpx 一般来讲都会ul都会定一个设计稿的尺寸,屏幕适应都要根据设计稿尺寸极端 (1).rpx:不论哪个型号的手机,屏幕宽度都是750rpx rpx与px的转换,根据设计稿换算例如:设计稿75 ...
微信小程序 - image 宽高自适应(图片无法自适应撑开标签)
微信小程序中的 image 标签跟 html 中的 img 标签还是有些差别的. image 标签有 src.mode 等属性基本够用但是今天在用的时候发现设置 src 之后,image 在小程序中 ...
微信小程序css单位,微信小程序 rpx 尺寸单位详细介绍
微信小程序最近火了,大家开发微信小程序有没有注意微信小程序对手机屏幕的要求或者影响呢,面对不同的手机屏幕,微信 rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应, 微信小程序 ...
微信小程序rpx与px如何换算
rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应. 规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375 ...
微信小程序 - rpx和px互转，以及系统给的 pixelRatio 值比例不对
rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应. 规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则 750rpx = 37 ...

【小程序】rpx（responsive pixel）自适应像素浅析

【小程序】rpx（responsive pixel）自适应像素浅析相关推荐

最新文章

热门文章