- 综合排序
- 最热优先
- 最新优先
- 来自专栏WeChat 小程序入门与实战
WeChat 如何理解rpx
在小程序样式表中，我们绝大多数的长度单位都设置成 rpx，而不是我们常见的 px，使用 rpx 小程序会自动在不同的分辨率下进行转换，而使用 px 为单位则不会UI 同学给我们的视觉稿一般是以 i6 为标准进行设计的 ，i6 的逻辑像素为 375*667 pt，视觉稿为物理像素 750*1334 px，其转换关系为 1px = 0.5 pt = 1rpx，我们在以往的移动端前端开发中，往往将视觉稿里的元素尺寸除以 2 而得到实际的元素尺寸，但在小程序中，可以按 1:1 的转换关系来设置元素尺寸，并能在不同分辨率设备下，保持一定的比例关系，下图是 100px 和 200rpx 的头像在 i6 和 iPad 设备上的显示效果或许其他同学会有疑问 对应多少个 px，即一个长度里能够包含多少个 px我们无法形容一个点有多大，但能通过点的个数来形容，在 i6 设备下，1 个 pt 包含了 2 个 px，如果不是以 i6 的标准进行做图，视觉稿与 rpx
1.9K40编辑于 2024-03-19 - 来自专栏杂七杂八
小程序中rpx与px
pt与px pt称为逻辑分辨率 pt大小与屏幕分辨率有关系，简单可以理解为长度与视觉单位 px是指物理分辨率，与屏幕尺寸没有关系 小程序中的rpx 屏幕分辨率 以iphone6的物理像素750*1334 为视觉稿设计，在小程序中使用rpx为单位 在ip6下 1px = 1rpx = 0.5pt 使用rpx为单位小程序会在不同分辨率下进行转换，而px则不会 建议小程序的设计稿以750 x 1334 的物理分辨率进行设计 有的时候文字部分不适合用rpx来表示
1.9K50发布于 2018-04-27 - 来自专栏阮一峰的网络日志
Openid托管服务RPX试用感想
所以，当我看到有一家公司提供Openid的托管服务RPX时，我是多么高兴啊。按照那家公司的宣传，你所要做的，只是在网页中插入几行代码，剩下的全部由它来完成。 我就按照它的说明，搭建了一个范例。
2.1K20发布于 2018-09-21 - 来自专栏技术专栏
微信小程序- 移动设备的分辨率与rpx
# 以iphone6的物理像素750x1334为视觉稿进行设计，而在小程序中使用rpx为单位 # iphone6下 1px=1rpx=0.5pt # 使用rpx，小程序会自动在不同的分辨率下进行转换，而使用 px单位则不会 为什么要用iphone6的物理分辨率来做设计设计图 iphone6下 1px = 1rpx (好计算) iphone6 plus下 1px = 0.6rpx
2K10发布于 2018-09-12 - 来自专栏前端学习教程
pt、rpx、px、em、rem、%、vh、vw的区别
前端有很多尺寸单位，比如: pt、rpx、px、em、rem、%、vh、vw等，我们需要深入了解它们的工作原理和使用情况。 7. rpx（小程序像素）：rpx是微信小程序中特有的单位，用于定义小程序界面的尺寸。rpx可以自适应不同设备的像素密度，确保小程序在不同设备上具有一致的外观。在选择单位时，要考虑到设计的目标和需要。
5.1K30编辑于 2023-11-08 - 来自专栏万少的技术分享
面试官：px、em、rem、vw、rpx 之间有什么区别？
面试官：px、em、rem、vw、rpx 之间有什么区别？ 单位名称 说明 web 小程序 px 绝对单位。代表像素数量 支持 支持 em 相对单位。 相对于视口的宽度大小 100vw 等于视口的宽度 支持 支持 rpx 相对单位。 小程序中独有 ， 750rpx 等于视口的宽度 不支持 支持 屏幕适配的原理 做移动端布局时，希望页面可以做到用户的手机屏幕越大、看见的页面元素就越大。因此，只能使用相对长度单位。 实际开发中，rem、vw、rpx 是我们比较常用的相对长度单位。 而使用它们的核心思想，就在于要搞懂 设计稿！！！ 大小是 375px ！！！ 换算的比例 1rem 等于 多少 px 设计稿 1vw 等于 多少 px 设计稿 1rpx 等于多少 px 设计稿 或者是和屏幕宽度的对应关系 多少 rem 等于屏幕的宽度 多少 vw 等于屏幕的宽度
50510编辑于 2025-02-11 - 来自专栏Micro_awake web
微信小程序中的rpx与移动设备物理像素
如下图： pt也称逻辑像素点，px物理像素点，1pt等于2px或者3px或更多; iphone6下面0.5pt=1px=1rpx; 使用rpx,小程序在不同设备分辨率下自行转换； PPI=物理像素开根号
1.3K20发布于 2018-10-10 - 来自专栏陶然同学博客
【小程序】wxss与rpx单位以及全局样式和局部样式
WXSS 和 CSS 的关系 rpx 1. 什么是 rpx 尺寸单位 2. rpx 的实现原理 3. rpx 与 px 之间的单位换算* 样式导入 1. 什么是样式导入 2. 与 CSS 相比，WXSS 扩展的特性有： rpx 尺寸单位 @import 样式导入 rpx 1. 什么是 rpx 尺寸单位 rpx（responsive pixel）是微信小程序独有的，用来解决屏适配的尺寸单位。 2. rpx 的实现原理 rpx 的实现原理非常简单：鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx 把所有 设备的屏幕，在宽度上等分为 750 份（即：当前屏幕的总宽度为 750rpx）。 开发举例：在 iPhone6 上如果要绘制宽100px，高20px的盒子，换算成rpx单位，宽高分别为 200rpx 和 40rpx。 样式导入 1.
94420编辑于 2023-02-24 - 来自专栏Rattenking
微信小程序----解析px、rpx、rem、vw实现页面布局
RPX rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。 ---- 微信的自适应单位，同时微信规定：屏幕宽为750rpx。 如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px。 设备 rpx换算px (屏幕宽度/750) px换算rpx (750/屏幕宽度) iPhone5 1rpx = 0.42px 1px = 2.34rpx iPhone6 1rpx = 0.5px 1px = 2.00rpx iPhone6s 1rpx = 0.552px 1px = 1.81rpx REM rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算。 ---- 微信小程序的rem尺寸单位，rem和rpx的换算关系：rem: 规定屏幕宽度为20rem；1rem = (750/20)rpx =37.5rpx; VW vw、vh、vmin、vmax
8.4K20发布于 2021-02-01 - 来自专栏CSDN博客专家-小蓝枣的博客
CSS样式中长度单位含义解析：rpx、px、vw、vh、em、rem、pt
在 CSS 样式中，有几种常见的长度单位，包括 rpx 、 px 、 vw 和 vh 等，含义解析如下： 1 . rpx （响应像素）： 是微信小程序中的一种相对长度单位，可以根据屏幕宽度进行自适应缩放 1rpx 约等于屏幕宽度的 1/750 ，因此在不同设备上显示的大小会自动进行缩放，适应不同的屏幕尺寸。通常用于布局和字体大小的设置。 下面是整理的一个表格，方便大家查看： 单位 特点 用途 rpx 相对于屏幕宽度的响应式单位，自适应缩放 布局和字体大小 px 固定单位，不具备响应性 边框、阴影等固定尺寸元素 vw 相对于视窗宽度的百分比
9.6K13编辑于 2024-05-26 - 来自专栏颜颜yan_的学习笔记
【微信小程序】小程序支持的css选择器、小程序自适应单位rpx简介
今日学习目标：小程序支持的css选择器、小程序自适应单位rpx简介 创作者：颜颜yan_ ✨个人主页：颜颜yan_的个人主页 ⏰预计时间：20分钟 专栏系列：我的第一个微信小程序 --- - 文章目录 前言 小程序所支持的css选择器 小程序自适应单位rpx 总结 ---- 前言 哈喽大家好，本次是微信小程序专栏第五期啦，本期主要内容是小程序支持的css选择器和小程序自适应单位rpx简介 小程序自适应单位rpx 在小程序里，长度单位既可以使用rpx，也可以使用px，使用rpx可以使组件自适应屏幕的高度和宽度，但是使用px不会。 1物理像素=1rpx=0.5px 注意：rpx会随着屏幕尺寸的变化而变化，而px不会。选择rpx还是px取决于你需要元素随着移动设备尺寸的变化而变化，还是让元素始终保持不变。 rpx通常非常适合用来控制图片的高度和元素之间的间距。 小程序的模拟器选项下，给出了每种机型的分辨率。这里的分辨率指的是逻辑分辨率pt，而非物理分辨率。
1.4K10编辑于 2022-12-01 - 来自专栏老K博客
UNI-APP高颜值登陆注册页面！！附源码！！
; height: 400rpx; } .tab { position: absolute; top: 250rpx; left: 20rpx; right: 20rpx : -50rpx; width: 440rpx; height: 285rpx; } } .line { width: 25rpx; height: 7rpx { width: 630rpx; height: 90rpx; margin-left: 60rpx; border-radius: 100rpx; } .separator 45rpx; } input { font-size: 30rpx; padding-left: 30rpx; width: 500rpx; } } : 0rpx 80rpx; height: 70vh; border-top-left-radius: 20rpx; border-top-right-radius: 20rpx;
2.3K10编辑于 2024-09-09 - 来自专栏cloud stdio
小程序案例：九宫格视图
;height: 150rpx;border-radius: 10rpx;">1</view> <view style="background-color: #FFF4F8;width: 200<em>rpx</em> ;height: 150<em>rpx</em>;margin-left: 20<em>rpx</em>;border-radius: 10<em>rpx</em>;">1</view> <view style="background-color: #FFF4F8;width: 200<em>rpx</em>;height: 150<em>rpx</em>;margin-left: 20<em>rpx</em>;border-radius: 10<em>rpx</em>;">1</view> </view> #FFF4F8;width: 200rpx;height: 150rpx;margin-left: 20rpx;border-radius: 10rpx;">1</view> </view> #FFF4F8;width: 200rpx;height: 150rpx;margin-left: 20rpx;border-radius: 10rpx;">1</view> </view> </
35820编辑于 2023-08-08 - 来自专栏程序技术知识
vue样式集 - 自适应居中弹窗
: 10rpx 20rpx 30rpx 20rpx; margin: 10rpx 40rpx 20rpx 40rpx; font-size width: 164rpx; height: 58rpx; line-height: 58rpx; background ; font-weight: 500rpx; width: 120rpx; line-height: 30rpx : 10rpx; padding: 10rpx 20rpx 10rpx 20rpx; margin: 30rpx 110rpx 20rpx 164rpx; height: 58rpx; line-height: 58rpx;
80710编辑于 2022-05-16 - 来自专栏黄啊码【CSDN同名】
【黄啊码】微信小程序swipe切换及自适应高度问题解决
: 10rpx 4rpx 0rpx; border-radius: 5rpx; overflow: hidden;} .doctor_img img{width:100%;height:100%;object-fit : left;} .b_gray{background:#ccc;} .doctor_dir { margin: 15rpx 0rpx 0rpx 0rpx; line-height: 43rpx :center; margin-top: 35rpx; } .zjtd_btn { font-size: 28rpx; color: white; padding: 2rpx; font-weight : unset; background-color: #d20303; top: 25rpx; } .spfl{ padding: 25rpx; font-size: 28rpx; ; margin: 30rpx 0rpx 13rpx; border-radius: 5rpx; overflow: hidden; } .doctor_txt{ text-align:
44410发布于 2021-09-26 低代码可视化-商城小程序首页设计-代码生成器
120rpx;margin-right: 20rpx;background-color: #ffffff;margin-left: 20rpx;box-shadow: 0rpx 0rpx 12rpx : 12rpx;overflow: hidden;width: calc(100% - 20rpx - 20rpx) ! : 12rpx;margin-bottom: 10rpx;margin-right: 20rpx;}.flex-clz {padding-top: 10rpx;padding-left: 10rpx;padding-bottom calc(50% - 10rpx - 10rpx) ! : 10rpx;padding-right: 20rpx;}.image-size {height: 200rpx !
41400编辑于 2024-10-11- 来自专栏cloud stdio
【uniapp小程序】打印列表UI模板
-- --> <u-tag text="黑白" style="width: 100<em>rpx</em>;margin-left: 10<em>rpx</em>;height: 50<em>rpx</em>;"> </u-tag> <u-tag text="标签" type="warning" style="width: 100<em>rpx</em>;margin-left: 10<em>rpx</em>;height: <image src="/static/yulan.png" mode="" style="width: 45<em>rpx</em>;height: 45<em>rpx</em>;"></image> <text>预览< , 0, 0.1); padding: 16px; margin: auto; margin-top: 20rpx; } .top_{ width: 650rpx; height: 180rpx ; } .dayin_set_zuo{ width: 200rpx; height: 50rpx; color: white; border-radius: 15rpx; justify-content
1.3K30编辑于 2023-08-08 - 来自专栏IT架构圈
「小程序JAVA实战」小程序视频展示页开发（52）
{ margin-top: 360rpx; margin-left: 50rpx; width: 80rpx; } .container-words { /* display display: flex; margin-top: 60rpx; margin-left: 50rpx; margin-right: 50rpx; /* margin-bottom 70rpx; height: 70rpx; } .size-me-bgm { width: 40rpx; height: 40rpx; } .bgm-style { : #f10b2e; } .face { width: 75rpx; height: 75rpx; /* margin: 20rpx; */ border-radius : flex; /* margin-top: 20rpx; margin-left: 50rpx; margin-right: 50rpx; justify-content
1.6K40发布于 2019-01-24 - 来自专栏冰霜的软件测试技术分享
开发一个微信小程序(7)：查询天气-添加热门城市
10rpx; } */ .search-container { font-size: 28rpx; margin-top: 20rpx; margin-left: 20rpx; height : 20rpx; height: 55rpx; width: 120rpx; border-radius: 8px; background: linear-gradient(145deg 0 0 20rpx; justify-content: center; align-items: center; height: 60rpx; /* width: 1000rpx; * : flex; justify-content: center; font-size: 26rpx; margin: 50rpx 30rpx 0 30rpx; } .next { margin-top ; height: 50rpx; margin: 15rpx 0 15rpx 0; } .banquan { height: 20rpx; }
66620编辑于 2023-02-24 - 来自专栏历史专栏
【愚公系列】2022年09月 微信小程序-图片懒加载功能实现
; */ } .card .image_card{ width: 268rpx; height: 268rpx; border-radius: 8rpx; position: relative; .image_card .back{ position: absolute; right:16rpx; top:16rpx; width: 56rpx; height: 32rpx; z-index ; } .card .user_card .avabox{ width:48rpx; height: 48rpx; margin-right: 15rpx; position: relative 32rpx; bottom:-5rpx; right:-5rpx; border-radius: 50%; background: red; } .card .user_name { width .image_card .back{ position: absolute; right:16rpx; top:16rpx; width: 56rpx; height: 32rpx; z-index
1.4K10编辑于 2022-09-28
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号