微信小程序px、rpx、vh、百分比单位介绍

句号（在IT行业摸爬滚打）

已于 2024-01-29 21:54:56 修改

阅读量1.3k

点赞数 7

分类专栏：微信小程序初学者进阶联盟文章标签：微信小程序小程序

于 2024-01-25 21:18:09 首次发布

本文链接：https://blog.csdn.net/tl437002770/article/details/135853922

版权

微信小程序初学者进阶联盟专栏收录该内容

34 篇文章 16 订阅 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了微信小程序中常用的尺寸单位，包括px、rpx、vh以及百分比的用法。px是固定长度单位，rpx可根据屏幕宽度自适应，vh代表屏幕高度的百分比，而百分比则是相对于父元素的尺寸。在微信小程序开发中，理解这些单位的使用至关重要。

摘要由CSDN通过智能技术生成

rpx

百分比%

px

px：css长度单位，一般为1/96英寸。

rpx

rpx: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

设备	rpx换算px (屏幕宽度/750)	px换算rpx (750/屏幕宽度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6 Plus	1rpx = 0.552px	1px = 1.81rpx

通过 drp=wx.getSystemInfoSync().pixelRatio可以得到rpx换算成px的转换率，将1px = 1rpx*dpr。

vh

vh是高度单位，100vh是整个屏幕的高度。1v

了解本专栏

订阅专栏解锁全文

超级会员免费看

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

句号（在IT行业摸爬滚打）

关注关注

7
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

订阅专栏

微信小程序中的vw和vh单位

kerryqpw的博客

07-11

2万+

微信小程序中的vm和vh单位

微信小程序rpx、px、vw、vh、upx区别

qq_29707325的博客

07-07

680

upx是uni-app中的长度单位，它代表设备独立像素（与屏幕密度无关），1upx等于设备上的1个物理像素。在不同分辨率和屏幕尺寸的设备上，upx会自动转换为适应当前屏幕的最佳物理像素值，帮助开发者实现跨设备的一致性布局。如果不进行任何适配处理，使用px单位的元素在不同设备上可能会因为屏幕像素密度（PPI）的差异而显示出不同的大小。对于不需要响应式布局的元素，或者在已知屏幕尺寸和分辨率的情况下，使用px单位是合适的。在微信小程序中，使用px作为单位时，元素的尺寸会直接对应到屏幕的物理像素上。

参与评论您还未登录，请先登录后发表或查看评论

论小程序height:100vh或100%的大坑

Anlantic的博客

07-11

487

1、scroll-y使用变量控制，输入框聚焦设置设置为false,失去焦点设置为true。问题也相当于没解决。咦，解决方案的高度100vh怎么和我的那么像呢，于是抱着试试的心态，将scroll-view的height改为了height:calc(100vh - 1rpx),然后发现成了。问题：原生小程序使用scroll-view包裹的很多输入框(input),当输入内容时，输入框的文字会向上跑，就是错位的问题。2、使用input的always-embed设置为true,对于我的问题没解决。

微信小程序中rpx和px有什么区别

xcksj666的博客

10-20

1253

当小程序运行在不同分辨率的设备上时，微信小程序会自动将 `rpx` 转换为不同设备下的像素值，从而保证适配性。在不同的设备上，1个像素可能对应不同的物理像素点。- `rpx`（响应式像素）：是微信小程序提供的一种相对尺寸单位，可以根据设备的屏幕宽度自动调整大小。`rpx` 可以解决不同设备分辨率差异的问题，使得界面在不同设备上展示更加一致。在微信小程序中，使用 `rpx` 单位可以确保元素的大小和间距在不同设备上的适配性。在微信小程序中，`rpx` 和 `px` 是两种不同的单位，用于适配不同屏幕的设备。

微信小程序 px和rpx

李小狮

11-11

524

px和rpx 在微信小程序里直接使用 rpx 就可以直接自适应页面大小 100px 不需要换算直接等于 100rpx 但是如有特殊情况一定要使用px 那就需要转换例如：实际图片大小200px 那写在微信小程序里就要除以2 就是100px 但是除以2是建立在设计图是以 iPhone6 标准机型的前提下（设计图宽度375px 或 750rpx）（1px = 2rpx） ...

微信小程序rpx和px关系

最新发布

ivan5277的博客

09-05

1155

微信小程序中使用了自定义的尺寸单位rpx（responsive pixel），这是一种相对单位，用于适配不同屏幕尺寸的设备。rpx的设计目的是为了让开发者能够更容易地写出跨屏幕尺寸的应用，而不需要为每个屏幕尺寸单独写一套样式。

微信小程序之px、rem、px、vw、vh

GeeLoong`s Blog

10-24

2294

rpx 是微信小程序解决自适应屏幕尺寸的尺寸单位。微信小程序规定屏幕的宽度为750rpx。无论是在iPhone6上面还是其他机型上面都是750rpx的屏幕宽度，拿iPhone6来讲，屏幕宽度为375px，把它分为750rpx后， 1rpx = 0.5px。 微信小程序同时也支持rem尺寸单位， rem 规定屏幕的宽度为20rem, 所以 1rem = (750/20)rpx = 37.5...

小白学习微信小程序的页面布局和屏幕适配

2401_85258012的博客

06-09

201

以上是关于微信小程序页面布局和屏幕适配的基本内容，通过学习和实践这些内容，相信小白对微信小程序的页面布局和屏幕适配有了初步的了解和掌握。在不同的手机屏幕上，显示效果可能会有所不同。为了保证页面在不同屏幕上有良好的展示效果，我们需要进行屏幕适配。在一些场景中，我们需要将一组数据以列表的形式呈现出来。在一些场景中，我们需要将一组数据以网格的形式呈现出来。分别表示标题栏、内容区域和底部栏，使用不同的高度和背景颜色来区分。在微信小程序中，提供了一些单位来进行屏幕适配的换算。用于描述页面的结构，用于描述页面的样式。

将微信小程序页面转为图片

qq_37635012的博客

03-04

5641

最近做项目遇到一个需求，那就是要将某个页面转为图片然后传给后端，我仔细找了一圈，发现官方那个Api也就是wx.canvasToTempFilePath生成的图片很有可能为空，太坑了，于是我放弃用它了，选择了用wxml2canvas。 npm init 是npm初始化，这个时候根据编译器终端一路回车最终会生成一个package.json文件 –production 是减少安装与业务无关的包，减少项目的体积。如果没有构建npm，需要我们工具-构建npm,或者勾选中如果你没看到这一项也别急，我们高级版本的微信

微信小程序入门项目-做一个马马虎虎的计算器

好好打代码

10-20

2180

打开微信开发者工具，新建小程序 打开app.json设置顶部的标题和颜色由于小程序不支持JavaScript的一些函数，比如evel()，所以代码变得复杂很多。 pages\index\index.js的代码： pages\index\index.wxml的代码： pages\index\index.wxss的代码：接下来调一下符号：去阿里云 iconfont下载对应的图标教程：微信小程序：如何使用阿里云 iconfont 图标字体？在app.wxss文件中加入==@import

[极致用户体验] 为什么2022年不建议你在小程序中用rpx

Hull Qin

09-28

4701

小程序有rpx属性，减少了适配各种手机设备的成本，提高了开发效率。但它并不是银弹，在宽屏设备上（例如Pad），用户体验较差。如果你追求极致用户体验，我建议你用px而非rpx。

微信小程序适配方案：rpx（responsive pixel响应式像素单位）

zxcvb0825的博客

12-04

2316

需要注意的是，使用 Less 编写样式会增加编译时间和运行时间的开销，如果项目比较小，建议直接使用原生的 CSS 样式；如果项目比较大，可以考虑使用 Less 来提高样式表的可维护性和可重用性。一般情况下，我们所选用的机型是IPhone6 因为它对于换算来说会比较方便一点。那么除了使用wxss之外，我们同样也可以使用less来定义样式。Iphone6下：1rpx = 1物理像素 = 0.5css。配置完成之后我们就可以使用less来定义样式了，小程序会根据屏幕的宽度自动计算rpx值的大小。

微信小程序里的rpx单位

weixin_45695200的博客

09-15

383

rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px 设备 rpx换算px (屏幕宽度/750) px换算rpx (750/屏幕宽度) iPhone5（宽320） 1rpx = 0.42px 　　 1px = 2.34px iPhone6 （宽375） 1rpx = 0.5px

小程序里的px与rpx

半两八斤的博客

01-30

1256

因为现如今的手机型号很多，所以px不同 1px=2rpx （以iPhone 6 为机型如此如果不是iPhone 6 可能就是不同的换算单位了哈） 1、rpx可以自适应手机分辨率，适配当前机型 2、px是绝对大小。如果需要使用原分辨率，则需除2（只适应IPhone 6） 3、小程序的image标签有默认值（即不设置style，可以查一下微信小程序的开发文档哦）W:320px,H:240px 参考iPhone6 宽度尺寸375px或750rpx 通常设计师设计的时候以iPhone6为机型，因为.

微信小程序开发中，像素大小使用px还是rpx更好？

xcksj666的博客

10-20

1115

rpx是相对像素，它会根据屏幕宽度进行换算，适配不同的设备屏幕大小。在不同设备上，rpx会根据设备的宽度进行换算，比如在iPhone 8上，屏幕宽度是375px，1rpx = 0.5px，在iPhone X上，屏幕宽度是375px，1rpx = 0.42px。这样可以保证界面在不同设备上的显示效果基本一致。px是像素，是绝对的长度单位，不同设备上的像素大小可能不一样，使用px设置的大小在不同设备上可能会有显示不正常的问题。因此，使用rpx能够更好地适配不同的设备屏幕大小，使得界面在不同设备上显示更为一致。

有关Vue、微信小程序、UniApp中的CSS中的宽度width单位、自适应

番茄Salad

11-22

2479

需要注意的是，在小程序中使用单位时，无需手动转换为实际像素值，小程序会自动根据屏幕密度进行换算。在小程序中设置宽度，无需手动换算为不同屏幕密度下的像素值。在小程序和UniApp开发中，推荐使用rpx单位来设置宽度和其他尺寸相关的样式。rpx单位可以实现在不同屏幕大小下的自适应效果，使页面在不同设备上呈现一致的布局和比例。）：类似于em，但是相对于字体中特定字符的高度或宽度。ex相对于小写字母x的高度，ch相对于数字0的宽度。需要根据具体情况选择合适的单位来设置宽度，以实现所需的效果。

微信小程序中rpx和px的区别？

weixin_43356308的博客

03-22

9380

大家用微信开发，肯定会接触到一个新的像素单位“rpx”。那么“rpx”跟之前我们进行网页开发的“px”相比较有什么区别呢？查看微信文档，由上述定义可知，rpx是“动态像素”，一个rpx宽度并不是固定的，可以根据屏幕宽度进行自适应。这里说的规定屏幕宽为750rpx，意思是说“微信小程序”中默认所有设备屏幕的宽度就为750rpx。意思是说，如果我想要我的元素占据屏幕的2/3,那么我只要设定他的width=500rpx即可。以下举个例子，设定两个view,蓝色的view的width=375px,绿色

微信小程序之rpx尺寸单位及换算方法

unlilalila的博客

11-01

8994

rpx （responsive pixel）：响应单位 rpx 可以根据屏幕宽度进行自适应，规定屏幕宽为750rpx rpx 是小程序中使用的屏幕自适应的尺寸单位可以通过 rpx 设置元素和字体的大小换算方法（用法与 rem 类似）： rpx 为小程序中的相对单位，即1 rpx = 屏幕宽度 / 750 px 例如：iPhone6屏幕宽度为 375 px，若要绘制宽为 200px，高为 150px 的盒子，换算为 rpx 单位： 1 r...