rpx

【小程序】什么是rpx

rpx：是微信小程序独有的，解决屏幕自适应的尺寸单位可以根据屏幕宽度进行自适应，不论屏幕大小，规定屏幕宽为750rpx，通过rpx设置元素和字体大小，小程序在不同尺寸的屏幕上可以自适应适配rpx与px之间的换算以
蟹黄汤包_·2023-10-14 16:44

微信小程序中rpx

rpx是为了解决微信小程序屏幕宽度自适应问题产生的尺寸单位，是微信小程序独有的尺寸单位，rpx（responsivepixel）:可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。
阳关的美好·2023-10-14 16:10

微信小程序app rpx

rpx是微信小程序独有单位，是一个相对单位，能根据屏幕宽度自适应rpx单位换算固定以750为基准，也就是iphone6的宽度1rpx=（屏幕宽度/750）px注意点：rpx虽然能实现等比例缩放，但是由于是按照屏幕宽度缩放
跑快快ing·2023-10-14 16:40

微信小程序canvas内容实现不同尺寸屏幕自适应

小程序canvas的API并没有像其他的一样支持小程序独有的rpx自适应尺寸单位，在绘制内容时所应用的单位仍然是px，那么如何实现不同尺寸屏幕的自适应呢？
刺心疯·2023-10-14 16:08

微信小程序开发笔记（三）flex布局和自适应单位rpx

什么是flex布局在上一篇博客里，笔者在hello.wxss里使用了display:flex;。什么是flex呢？flex布局是W3c组织在2009年提出的一个新的布局方案，其宗旨是让页面的布局样式更加简单，并且可以很好地支持响应式布局。这并不是小程序所独有的技术，它本身是CSS语法的一部分。只不过早期时候，主流的浏览器对flex布局的支持并不完善，造成了开发者并不知道与这种布局方式的存在或者使用
宝贝啊！·2023-10-14 16:37

微信小程序rpx计算方法

微信小程序rpx计算方法rpx（responsivepixel）是小程序所独有的尺寸单位，可根据屏幕宽度进行自适应。
pilgrimSnail·2023-10-14 16:35

rpx是微信小程序独有的，解决屏幕自适应的尺寸单位

rpx：是微信小程序独有的，解决屏幕自适应的尺寸单位可以根据屏幕宽度进行自适应，不论屏幕大小，规定屏幕宽为750rpx，通过rpx设置元素和字体大小，小程序在不同尺寸的屏幕上可以自适应适配rpx与px之间的换算以
m0_49471668·2023-10-14 16:24

微信小程序自定义导航栏组件

/*wxml*//*wxss*/.custom-bar{height:60rpx;padding-left:7px;/*固定为7*/display:flex;align-items:center;box-sizing
iCherries·2023-10-14 13:50

手写switch组件

效果图html部分{label}开关css部分.container{width:100%;height:58rpx;position:absolute;left:0;}.text{position:absolute
ahaott·2023-10-14 12:10

uniapp封装loading 的动画动态加载

实现效果html代码css代码.loadBox{width:180rpx;min-height:180rpx;border-radius:50%;display:flex;align-items:center
不想吃饭e·2023-10-14 08:55

同一view下的多个不同字号的text 底部对齐

line-height:28rpx;
Q1an·2023-10-13 20:25

微信小程序 生成海报

margin:0auto;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);}.myCanvas{margin-bottom:50rpx
想成为工程师的菜鸟·2023-10-13 19:05

小程序图片左右摆动效果

先看效果如下：简单的参考代码：wxml:css：.img{width:120rpx;height:120rpx;margin:300rpx;}jsPage({data:{animati
祈澈菇凉·2023-10-13 13:26

uniapp 微信小程序 vue3.0+TS手写自定义封装步骤条（setup）

width:200rpx':'width:60rpx'">=index+1"/>=index+1?'circleactivecircle':'circle'">index+1?'
造梦者FZ·2023-10-13 13:56

uniapp pc端和移动端列表上拉刷新加载分页

效果图：tips:实现了pc端和移动端兼容代码实现：html:=1"style="padding:30rpx0;color:#888;text-align:center;">{{loadMore}}data
爱喝冰可乐·2023-10-13 09:24

微信小程序 js中写一个px单位转rpx单位的函数

大家写东西自然还是会比较喜欢用rpx但是事实证明在js中还是px好用因为很多单位交互的函数还是只返回px单位的理论上将750rpx是整个屏幕的宽度那么我们可以这样写一个函数pxToRpx(px){//获取整个屏幕的宽度单位
深圳市有德者科技有限公司-耿瑞·2023-10-12 11:55

水球展示——微信小程序

html完成率{{list.finish}}%less//水球样式.water{margin-top:20rpx;border:2pxsolid#45affa;width:200rpx;height:200rpx
白云~️·2023-10-12 11:20

微信小程序倒计时

想要的效果：image.pngwxml:FENDI活动结束：{{day}}天{{hou}}：{{min}}：{{sec}}wxss:.name_right{width:400rpx;font-size:
绿啊绿啊绿刺猬·2023-10-12 10:06

移动端纯css实现瀑布流

效果图：csscolumn-count:2;数字为2，代表一行显示几个break-inside:avoid;去空白，避免换行.content{padding:30rpx;box-sizing:border-box
A去玩咯·2023-10-11 22:01

微信小程序更新用户自己选择头像昵称示例代码

})},/*pages/my/my.wxss*/page{background-color:#f8f8f8;}.head{position:relative;width:100%;height:400rpx
点点关注不迷路·2023-10-11 16:15

css ::after ::before 画*号

.required{position:relative;display:inline-flex;align-items:center;margin-bottom:16rpx;}.required::after
没头发的卑微打工人·2023-10-11 07:19

小程序 实现老虎机抽奖 - 可以点击N次，试用各种机型，不会产生误差

先看效果图：点击抽奖，就滚动到后端返回对应的数字，试用各种机型之前试用了background-position的方式去改变数字的背景位置，发奖在小程序使用rpx单位的情况下，会产生误差，且不适配各种机型
有脾气的程序媛·2023-10-10 23:54

css动画旋转分层旋转图

keyframesmove{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}.animations{width:100%;height:800rpx
一只大菜鸟J·2023-10-10 09:59

微信小程序-picker组件地区,时间,日期选择

{region[0]}}，{{region[1]}}，{{region[2]}}时间选择器当前选择:{{time}}日期选择器当前选择:{{date}}css代码.section{padding:20rpx
意外金喜·2023-10-10 05:17

微信小程序开发（三）小程序开发框架之WXSS和JavaScript

WXSS基于CSS做的一些修改和补充：尺寸单位rpx、外联样式导入、内联样式、选择器2.WXSS特性(1)支持响应式像素rpx(2)支持外联样式导入（通过@import,import后面跟的是外联样式的路径
angeliur·2023-10-10 01:06

css水平瀑布流+兼容ie元素间隙

看效果图：1.水平瀑布流：.container{display:flex;flex-wrap:wrap;padding:030rpx;}.item{width:47%;height:200px;}.container
搬砖的小编·2023-10-09 17:31

uniapp：swiper-demo效果

单元格轮播1000USDT首卡铸造.swiper1{height:850rpx;margin:50rpxauto100rpx;.swiper-item{width:342rpx;height:524rpx
sunly_·2023-10-09 16:59

微信小程序 获取当前屏幕的可见高宽度

很多时候我们做一下逻辑需要用整个窗口的高度或宽度参与计算而且很多时候我们js中拿到的单位都是px像素点没办法和rpx同流合污官方提供了wx.getSystemInfoSync()可以获取到部分窗口信息其中就包括了整个窗口的宽度和高度
深圳市有德者科技有限公司-耿瑞·2023-10-09 13:24

移动端tree树

样式rpx也要改成pxtree树组件(QQ群：旧群没了，新群：801142650)-DCloud插件市场https://ext.dcloud.net.cn/plugin?
youmdt·2023-10-09 13:21

微信小程序超出文本显示省略号

-单行文本超出：(建议设置一个宽度，默认为100%).team-content{width:500rpx;display:-webkit-box;-web
紫~阳·2023-10-08 21:58

uniapp scss之mixin的全局引入

webkit-border-radius:$radius;-ms-border-radius:$radius;border-radius:$radius;}2.使用.cirle{@includeborder-radius(10rpx
菜鸟也能逆袭·2023-10-08 20:29

微信小程序开发尺寸规范

这样一来就不需要做过多计算，设计稿上是多少就是多少，比如设计稿有一元素是width:375px,height:100px，你只需要在wxss写width:750rpx,height:200rpx，因为这种情况下
HCJKK·2023-10-07 22:48

微信小程序开发——自定义堆叠图

代码/*WXSS*/.bigFoldBox{width:100vw;border-top:calc(1/360*750rpx)blackso
HCJKK·2023-10-07 22:16

微信小程序 rpx 转 px

前言略rpx转pxletquery=wx.createSelectorQuery();query.selectViewport().boundingClientRect(function(res){letrpx2Px
sayyy·2023-10-07 14:07

css--踩坑

flex-shrink:0;2.横向滚动（子元素宽度不固定）/*tab栏*/.swiper-tab{/*1.最外面的元素设置固定宽度；以及滚动*/width:100%;overflow-x:auto;height:116rpx
常安cc·2023-10-07 12:32

上传图片

上传单组图片单组图片.pngaxml申请材料acss.content{/*width:100%;*/box-sizing:border-box;margin-bottom:30rpx;/*margin:
南崽·2023-10-07 02:50

微信小程序 table表格 固定表头和首列 右侧表格可以左右滚动

1.2tabble.wxml排班上午下午晚上{{ditem.date}}{{ditem.day}}{{uitem.name}}1.2tabble.wxsspage{background:#f3f3f3;font-size:30rpx
雪芽蓝域zzs·2023-10-05 08:48

给微信小程序添加一个客服会话

/*pages/index/index.wxss*/.kf_button{background-color:rgba(255,255,255,0);border:0px;height:100rpx;right
乌云大帝·2023-10-02 17:55

仿照nike小程序的分类切换效果

先上效果图布局很简单主要是做切换的动画效果和轮播图高度自适应，先看一下xml代码XML{{item.title}}{{jtem.title}}wxss（这里的样式我用的是less）.container{.banner-body{width:640rpx
南墙倒·2023-10-02 13:51

小程序（二）

组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。scroll-x：允许横向滚动。scroll-y：允许纵向滚动。
葛瑞丝·2023-10-01 20:55

【小程序】常用的样式

卡片样式.app-card{box-shadow:04px8px0rgba(0,0,0,0.2);transition:0.3s;border-radius:10rpx;background-color
狍子君·2023-10-01 17:06

uniapp实现自定义头部文字滚动字幕

{item.text}}CSS：.noticeBarBox{width:100%;position:fixed;left:0;top:0;.NoticeBar{width:100%;height:66rpx
New个对象.·2023-09-28 19:01

小程序二级分类

{{item.name}}{{item.name}}该分类暂无数据css.main{width:100%;height:520rpx;background-color:#fff;}.sss{background
前端开发小吴·2023-09-28 00:42

uni-app 通过 swiper 实现卡片滑动背景同步切换效果

组件也可以实现类似效果css样式：page{background-color:#FAFAFA;}.swiper-box{.swiper-bg{width:100%;position:absolute;height:500rpx
Days2050·2023-09-27 18:55

微信小程序如何做自适应（移动设备分辨率和rpx）

一个pt可以有一个px构成，也可以有2个，还可以有3个甚至更多组成如何做不同分辨率设备的自适应以iPhone6物理像素750*1334为视觉稿进行设计，而在小程序中使用rpx为单位iPhone6下1px
qq_37200686·2023-09-26 18:43

Scss使用（css预处理器）

定义变量定义变量，页面样式可以使用使用变量值scss变量不是延时加载，不可以先使用后定义变量插值格式：${变量名称}//使用$加变量名定义变量与值$bgColor:pink;$box-width:400rpx
Redundantº·2023-09-25 12:37

css3制作图形

顶部弧度.radian{width:100%;height:280rpx;background:linear-gradient(tobottom,#f6aa520%,#e9594e100%);clip-path
　康　·2023-09-25 09:59

微信小程序-实现签字板的效果（附代码和效果）

wxml重置确认{{text}}wxsspage{background:#f2f5f5;}.bg{width:686rpx;height:300rpx;margin:18rpxauto0auto;background-color
IU憨憨·2023-09-24 23:46

微信小程序授权登录页面（有提示窗）

1.4允许登录后，跳转到小程序首页2代码2.1wxml文件授权登录2.2wxss文件/*pages/userInfo/userInfo.wxss*/.header{/*样式文件配置*/margin:90rpx090rpx50rpx
长安情故人巷·2023-09-24 21:48

.uni-forms-item 样式在小程序中不起作用

.uni-forms-item样式在小程序中不起作用，在前面加上::v-deep::v-deep.uni-forms-item{margin-bottom:38rpx;padding:0rpx30rpx
lemontree-xy·2023-09-24 13:30
上一页 3 4 5 6 7 8 9 10 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他