微信小程序rpx计算方法

最新推荐文章于 2023-11-29 17:06:06 发布
最新推荐文章于 2023-11-29 17:06:06 发布
阅读量1.3k 收藏 2
点赞数
分类专栏： 前端杂谈 文章标签： 小程序 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57625433/article/details/116837976
版权

微信小程序rpx计算方法

rpx（responsive pixel）是小程序所独有的尺寸单位，可根据屏幕宽度进行自适应。

规定所有屏幕宽度均为750rpx（可类比vw的100%）

当屏幕宽度为375px时，预设置字体大小为15px，计算方法如下：

375px=750rpx

1px=2rpx

15px=30rpx

font-size: 30rpx;

此时字体大小可随屏幕大小改变而自适应变化

屏幕实际尺寸/750rpx=目标元素尺寸/结果

注意：

可在微信开发者工具左上角选择自定义机型，高度随意，宽度设置为750px

此时，可直接将单位改为rpx，免去换算的麻烦

pilgrimSnail
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序动态设置图片大小的方法
10-15
rpx是微信小程序中的响应式单位，能根据屏幕宽度自动调整。 其次，我们还可以通过`bindload`事件来实现动态自适应。`bindload`会在图片加载完成后触发，提供原图的高度和宽度信息。在`bindload`的回调函数中，我们...
微信小程序实现美团菜单
12-10
本文实例为大家分享了微信小程序实现美团菜单的具体代码，供大家参考，具体内容如下 1.功能仅是菜单功能一部分，仅供参考 2.需求描述：右侧菜品部分在滚动的时候，左侧菜品选中分类与右侧第一行菜品所在分类对应...
微信小程序rpx
huang100qi的专栏
06-06 1491
【英寸Inch】英寸表示屏幕斜对角线的长度。如下图所示：【像素Pixel】像素是图像的基本采样单位，它不是一个确定的物理量，因为像素点的物理大小是不确定的。如图:【分辨率】分辨率是屏幕像素的数量，一般用屏幕宽度的像素点乘以屏幕高度的像素点。如描述iphone6的分辨率是750*1334.分辨率又分为【物理分辨率】和【逻辑分辨率】，值得注意的是实际工作中设计师常常给的是物理分辨率，程序中用到的是逻辑...
微信小程序 实现 px值转为rpx值、rpx值转为px值
weixin_43475507的博客
10-23 547
微信小程序 实现px值转为rpx值、rpx 值转为px值
微信小程序之rpx尺寸单位及换算方法
unlilalila的博客
11-01 8362
rpx （responsive pixel）：响应单位 rpx 可以根据屏幕宽度进行自适应，规定屏幕宽为750rpx rpx 是小程序中使用的屏幕自适应的尺寸单位 可以通过 rpx 设置元素和字体的大小 换算方法（用法与 rem 类似）： rpx 为小程序中的相对单位，即1 rpx = 屏幕宽度 / 750 px 例如：iPhone6屏幕宽度为 375 px，若要绘制宽为 200px，高为 150px 的盒子，换算为 rpx 单 位： 1 r...
Uni-app 中 rpx 用法
炫爱小七的博客
04-14 1万+
在开发过程中经常出现按设计搞上的尺寸写 最终在不同手机上显示不一样。经常被UI 怼 后来才知道 rpx 这种牛逼的单位，但是看官网写的换算方法有点懵 rpx 是相对于基准宽度的单位，可以根据屏幕宽度进行自适应。uni-app规定屏幕基准宽度 750rpx。 开发者可以通过设计稿基准宽度计算页面元素 rpx 值，设计稿 1px 与框架样式 1rpx 转换公式如下： 设计稿 1px / 设计...
微信小程序（13）：尺寸单位rpx
weixin_43731793的博客
02-17 216
尺寸单位 view { height: 200rpx; font-size: 40rpx; background-color: aqua; width: calc(750rpx*100/375); }
微信小程序 JS动态修改样式的实现方法
10-17
此外，微信小程序还提供了`wx.createSelectorQuery()`方法，可以获取节点信息并进行多节点操作，实现更复杂的样式交互。 总结起来，微信小程序的JS动态修改样式是通过绑定数据到样式属性，并利用`this.setData()`...
微信小程序消费计算器demo完整源码
06-09
使用WXSS进行样式设计，类似于CSS，但有一些特有属性，如rpx单位适应不同设备的屏幕尺寸，以及一些微信小程序特有的样式规则。在消费计算器中，可能会对输入框、按钮等元素进行样式定制，使其符合应用的视觉风格。 ...
微信小程序-知乎全功能源码
06-12
7. **样式设计**：微信小程序使用WXML和WXSS进行视图层的构建，其中WXSS类似于CSS，但有一些特定的规则和扩展，如尺寸单位rpx可以根据屏幕宽度动态适配。 8. **权限管理**：为了保护用户隐私和安全，微信小程序需要...
微信小程序rpx的用法
qq_39131699的博客
03-04 343
定义啥的我就不说了，个人尝试： 在iphone6的视图下，1px = 2rpx的算法比较合适
微信小程序-rpx尺寸介绍
zhenghhgz的博客
11-28 2274
最近开始入手微信小程序，如果有前端开发经验的同学应该很容易入手。在布局样式的时候发现微信小程序有自己的css尺寸单位-rpx 比px 多了个r。接下来简单介绍一下怎么使用微信小程序的rpx rpx简介： rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素
微信小程序尺寸单位rpx以及样式相关介绍
zgphacker2010的专栏
07-29 3464
一.rpx单位 rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。 微信小程序也支持rem尺寸单位，rem和rpx的换算关系：rem: 规定屏幕宽度为20rem；1rem = (750/20)rpx 注：开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。 建议：设计稿.
第5课 微信小程序常用尺寸单位rpx说明：
舜岳的博客
05-06 2497
第5课 微信小程序尺寸单位rpx说明： rpx单位： width: 750rpx; //定义所有手机屏幕宽度都为750rpx px单位： height: 750px; //px单位最好只用于高度，如果定义宽度 手机屏幕不同显示效果也会不同 vw单位： width: 100vw; //定义所有屏幕宽度都为100vw vh单位： height: 100vh; //定义所有屏幕高度...
px与rpx关系与换算方法
jiaojiaoiso的博客
12-16 2万+
px与rpx关系与换算
微信小程序开发笔记（三）flex布局和自适应单位rpx
mamengna的博客
12-01 578
什么是flex布局 在上一篇博客里，笔者在hello.wxss 里使用了display: flex;。什么是flex呢？ flex布局是W3c组织在2009年提出的一个新的布局方案，其宗旨是让页面的布局样式更加简单，并且可以很好地支持响应式布局。这并不是小程序所独有的技术，它本身是CSS语法的一部分。只不过早期时候，主流的浏览器对flex布局的支持并不完善，造成了开发者并不知道与这种布局方式的存在或者使用非常少，我们还是习惯使用传统的position和float属性来布局。但传统的布局方式有它的缺陷 ，.
[每天进步一点点~] px、rpx、pt之间的转换
DarlingYL的博客
09-02 4339
1 px = 2 rpx 1 px = 0.75 pt 1 em = 16 px 1 em = 12 pt 1px = 1pt * 图像分辨率/72 rpx是基于 当前屏幕宽度与750的比值 算出来的，属于动态的。会根据不同屏幕进行换算。所以做响应式比较好用。 px、pt、em换算表???? https://www.runoob.com/w3cnote/px-pt-em-convert-table.h...
微信小程序字体样式font
最新发布
m0_72168336的博客
11-29 2050
微信小程序字体常用样式
rpx与px换算
热门推荐
LeoJame的博客
05-17 3万+
rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。 规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px 设备 rpx换算px (屏幕宽度/750) px换算rpx (750/屏幕宽度) iPhone5 1rpx = 0.42px 　　 ...
微信小程序 手机屏幕rpx宽度、rpx高度
05-25
在微信小程序中，屏幕的宽度和高度可以用rpx（responsive pixel）来表示。rpx是一种自适应的像素单位，它会根据屏幕宽度进行自动缩放，使得不同尺寸的屏幕上显示的大小保持一致。 要获取屏幕的rpx宽度和高度，可以通过wx.getSystemInfoSync()方法获取系统信息，其中包含了屏幕的宽度和高度等信息。然后可以通过以下公式计算得到rpx宽度和高度： ``` // 获取系统信息 const systemInfo = wx.getSystemInfoSync(); // 屏幕宽度，单位px const screenWidth = systemInfo.screenWidth; // 屏幕高度，单位px const screenHeight = systemInfo.screenHeight; // 可使用窗口宽度，单位px const windowWidth = systemInfo.windowWidth; // 可使用窗口高度，单位px const windowHeight = systemInfo.windowHeight; // rpx比例 const rpxRatio = 750 / windowWidth; // 屏幕宽度，单位rpx const screenWidthRpx = screenWidth / rpxRatio; // 屏幕高度，单位rpx const screenHeightRpx = screenHeight / rpxRatio; ``` 其中，750是设计稿的宽度，可以根据实际情况进行调整。计算出来的screenWidthRpx和screenHeightRpx就是屏幕的rpx宽度和高度了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值