rpx 第7页

微信小程序设计稿的尺寸

rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。

剑圣_盖小聂·2023-10-22 15:18

uniapp开发小程序如何修改picker选中样式及选中字体样式

multiSelector')}}{{getItemValue(item1,'multiSelector')}}//picker选中的样式/deep/.picker-box{width:100%;//height:96rpx

大力水手~·2023-10-22 14:23

uview笔记

layout布局篇1.尽量不要用gutter,代替方案如下：.demo-layout{padding:10rpx;}要点外部包裹设置overflow:hiddenu-row使用customStyle属性设置

星星野源·2023-10-20 19:03

uview组件使用笔记

图标样式修改图标的样式通过color参数修改图标的颜色通过size参数修改图标的大小，单位为rpx效果图图片图标1.3.0这里说的图片图标，指的是小图标，起作用定位为"icon"图标作用，而非大尺寸的图片展示场景

王家视频教程图书馆·2023-10-20 19:28

微信小程序全栈开发实践第二章微信小程序组件介绍及使用 -- 2.1 icon组件介绍，及如何自定义实现图标

一、icon组件size：支持两种单位，rpx与px，px数值类型，默认使用rpx是屏幕自适应单位，rpx把屏幕分为750个单位，每个单位是1/750,在iphone6机器上，屏幕宽度=350px，1rpx

weixin_42580704·2023-10-20 19:16

uniapp 小程序优惠劵样式

先看效果图上代码10元优惠劵满120元可用有效期至：2023-10-30立即使用.coupon{width:100%;.tickets{display:flex;//padding:20rpx;width

贪吃蛇2120·2023-10-20 16:10

微信小程序学习笔记三

WXSS样式文件组成项目公共样式：会被注入到小程序的每个页面；页面样式：与app.json注册过的页面同名且位置同级的WXSS文件；其他样式：可被项目公共样式和页面样式引用，尺寸单位rpx，以375个物理像素为基准

mm jiao·2023-10-20 16:35

【前端小程序】06 - 购物车页面

1.添加收货地址按钮1.1页面结构与样式页面结构：添加收货地址页面样式：.cart{.address_btn{padding:20rpx;button{color:var(--themeColor);width

itlu·2023-10-20 13:44

关于小程序button控件上下边框的显示和隐藏问题

button控件上下有一条淡灰色的边框，在空件上加上了样式border:(none/0);都没办法让button上下的的边框隐藏：代码如下.con_listbox{width:100%;height:120rpx

端木安玉·2023-10-20 10:52

WebStrom对于rpx爆红的解决方法

WebStrom对于rpx爆红的解决方法问题场景：在使用WebStrom编写CSS样式代码时，经过快捷键格式化后代码CSS变无效了！

知识汲取者·2023-10-19 23:31

常用且容易遗忘的 CSS 样式清单

1、文字超出部分显示省略号单行文本的溢出显示省略号（一定要有宽度）p{width:200rpx;overflow:hidden;text-overflow:ellipsis;white-space:nowrap

会飞的贼er·2023-10-19 22:39

微信小程序实现横屏展示

pageOrientation":"portrait"（默认）实现自动切换横竖屏只需要在page的json页设置"pageOrientation":"auto"这样就能横屏了，但要注意一点，竖屏切到横屏rpx

盛国强·2023-10-19 20:22

小程序跑马灯

}}{{list[swiperIndex]}}wxss.marquee-swiper{height:100%;}.text-item{box-sizing:border-box;padding:020rpx

7d8d3104a404·2023-10-19 16:37

uniapp map盒子设置圆角

uniappmap盒子设置圆角overflow:hidden;.map-container{border-radius:10rpx;overflow:hidden;}.map{width:100%;height

造梦者FZ·2023-10-19 16:51

微信小程序仿苹果负一屏由弱到强的高斯模糊

查看模糊效果一、创建小程序组件二、代码wxml:wxss:.topBar-1{position:absolute;width:100%;height:190rpx;z-index:150;backdrop-filter

Garc·2023-10-19 08:29

微信小程序小项目前端实战内容

3、关键组件的学习与应用1、头部搜索框.wxml搜索.wxss.search_input{height:90rpx;paddi

正曦08·2023-10-19 07:36

微信小程序修改van-popup的背景颜色

custom-style里面修改即可；手机号快捷登录阅读并同意《用户信息授权书》、《卖家云SaaS系统服务协议》样式代码，包括同意协议勾选前后的样式，.herad.wx-login-btn{margin:80rpx064rpx0

暴富的im·2023-10-18 15:56

uni-app 首页瀑布流布局

{{parsePrice(item.oriPrice)[1]}}.pubuBox{padding:22rpx;}.pubuItem{column-count:2;column-gap:2

3天饿九顿·2023-10-18 03:49

微信小程序wxss动态变量的写法动态主题色配置~TuT~超简单哦

wxml中wxss中.bar-left{/*width:100rpx;*/width:var(--width--);background-image:linear-gradient(toright,#2458FF

李宏伟~·2023-10-16 00:32

【css】关于css样式中border-radius和border-image不兼容问题

LogOut.out{margin:0auto10rpx;width:336rpx;height:64rpx;box-sizing:border-box;border-image:linear-gradient

嘿，小苹果·2023-10-14 22:19

什么是rpx尺寸单位？

rpx（responsivepixel）响应单位rpx是微信小程序独有的、解决屏幕自适应的尺寸单位可以根据屏幕宽度进行自适应，不论大小屏幕，规定屏幕宽为750rpx通过rpx设置元素和字体的大小，小程序在不同尺寸的屏幕下

小鱼儿同学啦·2023-10-14 16:44

【小程序】什么是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

推荐频道

rpx