补充说明rpx

最新推荐文章于 2025-03-15 16:12:45 发布

苏苏喂苏苏_

最新推荐文章于 2025-03-15 16:12:45 发布

阅读量318

点赞数

分类专栏： CSS 文章标签：前端 css 小程序

本文链接：https://blog.csdn.net/skkkkkkkkk/article/details/118874760

版权

CSS 专栏收录该内容

1 篇文章

订阅专栏

rpx使用方法

小程序规定了设备的屏幕无论什么尺寸，其都为750 rpx。但是对于不同设备的高度，没有明确规定，所以在设计稿中屏幕的高度，要做高度的 rpx 换算。

例如：iPhone 6 （375 × 667）

屏幕高度rpx = 750 * 667 / 375 = 1334 rpx

所以在设置样式时，假设设计稿中的盒子宽为200，高为100，那么可以在样式中写：

.box{
    width: calc(750rpx*200/375);
    height: calc(1334rpx*100/667);
}

这样不同的设备中，元素所占比例相同：假设切换到 iphone5（320 × 568）中，盒子的宽度和高度分别是 170.66px，85.3px

宽度所占比例：170.66 ÷ 320 ≈ 200 ÷ 375 ≈ 0.5333125

高度所占比例：85.3 ÷ 568 ≈ 100 ÷ 667 ≈ 0.15

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

苏苏喂苏苏_

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

小程序新版获取用户头像、昵称调整方案

商务合作 / 项目定制 / 学习交流。个人vx：lovely_wml

07-05

5573

自生效期起，小程序 wx.getUserProfile 接口将被收回：生效期后发布的小程序新版本，通过 wx.getUserProfile 接口获取用户头像将统一返回默认灰色头像，昵称将统一返回 “微信用户”。生效期前发布的小程序版本不受影响，但如果要进行版本更新则需要进行适配。

rpx

a44185的博客

05-19

607

文章目录rpx是什么rpx和rem的区别原理rpx和iPhone6的关系 rpx是什么 rpx是一个单位。 rpx和rem的区别 rpx和rem一样，都是解决屏幕自适应的尺寸单位。但是，rem需要手动换算，rpx是自动换算。原理不管手机屏幕是多大，rpx都统一规定了屏幕宽为750rpx。 1rpx的实际宽度，是屏幕宽度的750分之一。 rpx和iPhone6的关系 iphone6的实际宽度是375px。所以，这里就是375px=750rpx，即1px=2rpx ...

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

关于rpx

Dblack197的博客

07-19

238

在WXSS中，引入了rpx（responsive pixel）尺寸单位。引用新尺寸单位的目的是，适配不同宽度的屏幕，开发起来更简单。对于rpx的定义、使用有一些疑问。

一文弄懂rpx单位：UI设计与前端开发的双重视角

airCyan_的博客

03-15

993

rpx是小程序（如微信小程序）中引入的一种相对单位，全称为。它的设计初衷是为了让开发者能够更方便地实现响应式布局。rpx单位是小程序开发中实现响应式布局的利器。从UI设计到前端开发，它简化了适配流程，提高了开发效率。通过本文的解析，希望你能全面掌握rpx的使用方法，并在实际项目中灵活运用。如果你有更多关于rpx的问题，欢迎在评论区留言讨论！

微信小程序 rpx

2301_79585673的博客

02-13

155

在iphone6手机下，px与rpx换算关系： 1rpx = 0.5px，750rpx = 375px，刚好能填充频幕宽度。rpx把所有设备的屏幕，以iphone6为视觉稿的标准，在宽度上等分为750份(即当前总宽度为750rpx)。rpx是小程序独有的，用来解决屏适配的尺寸单位，鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配。设计稿宽度为750px，iphone6手机设备宽度为375px。

【微信小程序】rpx

qq_61845982的博客

07-10

8355

rpx是小程序独有的，用来解决屏适配的尺寸单位rpx的实现原理: rpx的实现原理非常简单:鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx把所有设备的屏幕，在宽度上等分为750份(即当前总宽度为750rpx) ·在较小的设备上，1rpx代表的宽度较小 ·在较大的设备上，1rpx所代表的宽度较大 小程序在不同设备上运行的时候，会自动............

样式rpx

明月寄天涯的博客

04-25

218

css中padding: 80rpx 20rpx代表什么

最新发布

04-02

首先拆分padding值的含义，说明上下和左右的数值，然后解释rpx单位，最后可能提到简写规则和box-sizing的影响。同时需要引用相关的引用资料来支持解释，例如引用[2]说明两个值的情况，引用[4]和[5]解释rpx。检查...

``` <view class="fixed-bottom;" style="display: flex; justify-content: center; "> <button style=" width: 350rpx;height: 80rpx;background-color: white;color: rgb(41, 137, 255);border-radius: 50rpx;line-height: 80rpx;" class="btn1">搜索蓝牙打印机</button> <button style=" margin-left: 16rpx; width: 350rpx;height: 80rpx;background-color: rgb(41, 137, 255);color: white;border-radius: 50rpx;line-height: 80rpx;"class="btn">添加云打印机</button> </view>```第一个button有灰色边框怎么取消

03-26

**原理说明**： - 浏览器默认会给`<button>`元素添加`border: 2px outset`的立体边框 - 使用`border: none`覆盖默认边框样式 - `outline: none`用于消除点击时出现的聚焦轮廓线（可选） - 注意rpx是小程序专用单位，...

<template> <view class=“box”> <view class=“box-header”> <view class=“box-header-left”>  </view> <view class=“box-header-right”> <text class=“box-header_label”>分值：</text> <text class=“box-header_value”>{{ item.indicatorScore }}</text> </view> </view> <view class=“box-title”> <view class=“box-title_left”> <text class=“sort”>O{{ item.numSort }}</text> <view class=“title”> <u–textarea v-model=“item.performanceIndicators” placeholder=“请输入关键目标” autoHeight height=“35” maxlength=“500” ></u–textarea> <view class=“type”> <text class=“typeName”>{{ item.typeName }}</text> <u-icon name=“arrow-down”></u-icon> </view> </view> </view> <view class=“box-title_right” :class=“{ arrowDrown: !item.show }” @click=“changeShow(item)”> <image src=“@/static/image/OKR/arrow-up.png” mode=“widthFix” /> </view> </view> <transition name=“slide-fade”> <view class=“box-list” v-show=“item.show”> <view class=“krBox” v-for=“(element, index) in item.krList” :key=“index” > <view class=“krBox-header”> <view class=“krBox-header-left”> <text class=“sort” >KR{{ item.numSort }}.{{ element.numSort }}</text > <u–textarea v-model=“element.quantitativeObjectives” placeholder=“请输入关键结果，格式：（通过xxx策略/措施），实现XX量化结果）” autoHeight height=“35” maxlength=“500” border=“surround” ></u–textarea> </view> <view class=“krBox-header_close”> <image src=“@/static/image/OKR/close.png” mode=“widthFix” /> </view> </view> <view class=“krBox-item”> <view class=“krBox-item_label”> <text>填报部门</text> </view> <view class=“krBox-item_value”> <u–input placeholder=“请选择填报部门” border=“surround” v-model=“element.fillDeptName” suffixIcon=“arrow-down” suffixIconStyle=“color: #C0C4CC;font-size: 18px;” ></u–input> </view> </view> </view> </view> </transition> </view> </template> <script> export default { props: { item: { type: Object, default: () => { return { id: “”, typeId: “”, typeName: “”, performanceIndicators: “”, numSort: 1, dataType: 0, indicatorScore: 0, krList: [], show: true, }; }, }, }, data() { return {}; }, methods: { changeShow(item) { item.show = !item.show; }, }, }; </script> <style lang=“scss” scoped> .box { background: #ffffff; border-radius: 16rpx; overflow: hidden; // padding: 20rpx; box-sizing: border-box; /* font-size: 30rpx; color: #303133; */ &-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8rpx; padding: 20rpx 20rpx 0; box-sizing: border-box; &_label { font-size: 26rpx; color: #909399; } &_value { font-size: 26rpx; color: #303133; } } &-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30rpx; padding-left: 20rpx; box-sizing: border-box; &_left { flex: 1; display: flex; align-items: center; justify-content: flex-start; .sort { background: #409eff; border-radius: 8rpx; padding: 0 12rpx; font-weight: 500; font-size: 30rpx; color: #ffffff; margin-right: 12rpx; } .title { position: relative; flex: 1; border: 1rpx solid #efefef; border-radius: 8rpx; .u-textarea { text-indent: 6em; } .type { position: absolute; top: 0; left: 10rpx; display: flex; align-items: center; height: 70rpx; .typeName { margin-right: 10rpx; } .u-icon { margin-top: 8rpx; } } } } &_right { width: 60rpx; display: flex; justify-content: center; align-items: center; transition: all 0.3s ease; image { width: 44rpx; } } .arrowDrown{ transform: rotate(180deg); } } &-list { } } } .krBox { padding: 24rpx 60rpx 32rpx 20rpx; box-sizing: border-box; border-top: 1rpx solid #dcdfe6; } </style> 完善样式，实现slide-fade，类似于折叠面板形式的展开收起效果

03-08

然后，查看现有的样式，用户可能已经有一些CSS，但需要补充transition相关的部分。可能需要为.box-list设置overflow: hidden，以便在动画过程中内容不会溢出。同时，设置max-height为0，在进入时过渡到实际高度，但...

<u-button :custom-style="cancelOrderBtn" style="margin: 0 0 0 10%;width: 100px;" @click="datatgyewtrwe('refund')">cancelOrderBtn:{ width: '100%', height: '100rpx', // background: '#FFFFFF', borderRadius: '16rpx', fontFamily: 'PingFangSC-Regular', fontSize: '32rpx', color: '#333333', // border: '1px solid #CCCCCC', }为什么设置圆角没效果

04-02

引用[4]是关于iOS平台下去除软键盘上方横条的配置，虽然和当前问题无关，但说明平台特定的样式问题可能存在，可能需要检查平台差异，比如某些CSS属性在特定平台需要前缀或不同的处理方式。接下来，分析可能的原因...

什么是rpx尺寸单位？

热门推荐

小鱼儿~同学

02-11

3万+

rpx （ responsive pixel）响应单位 rpx是微信小程序独有的、解决屏幕自适应的尺寸单位可以根据屏幕宽度进行自适应，不论大小屏幕，规定屏幕宽为750rpx 通过 rpx 设置元素和字体的大小，小程序在不同尺寸的屏幕下，可以实现自动适配 rpx 和 px之间的换算在普通网页开发中，最常用的像素单位是px 在小程序开发中，推荐使用rpx这种响应式的像素单位进行开发以...

微信小程序尺寸单位rpx以及样式相关介绍

汉堡请不要欺负面条

05-05

2683

一.rpx单位 rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。微信小程序也支持rem尺寸单位，rem和rpx的换算关系：rem: 规定屏幕宽度为20rem；1rem = (...

rpx到底是干什么的？使用场景是什么？底层原理是什么？

长风破浪会有时的博客

01-18

413

rpx。

rpx记录使用

weixin_43663775的博客

04-20

215

rpx 是相对于基准宽度的单位，可以根据屏幕宽度进行自适应。uni-app 规定屏幕基准宽度 750rpx。开发者可以通过设计稿基准宽度计算页面元素 rpx 值，设计稿 1px 与框架样式 1rpx 转换公式如下：设计稿 1px / 设计稿基准宽度 = 框架样式 1rpx / 750rpx 换言之，页面元素宽度在 uni-app 中的宽度计算公式： 750 * 元素在设计稿中的宽度 / 设计稿基准宽度 ...

微信小程序--rpx单位的理解

HopCoder

05-28

1万+

如何理解rpx？ rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。小测试： 1、rpx 全称是什么？（请填写英语全称） responsive pixel 2、iphone ...

rpx 和 rem 详解

yuange

01-21

5467

1 在微信里，所有设备的宽度默认为750 rpx，设置高的时候如果设置750rpx ，那么高和屏幕的宽是一样的。 2 rem 是相对html 里面（最外层）的字体的大小来设置的，比如你设置html 里面的font - size ：10 px，那么你设置高和宽的时候，1rem 就是10px。如果不设置，默认字体应该是16px； ...

小程序获取高度以及单位转换px转rpx

CY_WINT的博客

03-12

895

小程序单位转换 px->rpx rpx->px

谈谈像素以及微信小程序的 rpx

weixin_33918357的博客

05-21

350

欢迎来我的博客阅读：「谈谈像素以及微信小程序的 rpx」前言最近在负责有赞的某个业务的微信小程序开发，这是我第一次着手微信小程序的开发，这个过程中发现微信小程序所定义的一套 WXSS (WeiXin Style Sheets) 中有一个有趣的长度单位 rpx，即 responsive pixel。根据官方的描述： rpx（responsive pixel），可以根据屏幕宽度进行自适应。...