rpx 第4页

rpx单位

750*元素在设计稿中的宽度/设计稿基准宽度举例说明：若设计稿宽度为750px，元素A在设计稿上的宽度为100px，那么元素A在uni-app里面的宽度应该设为：750*100/750，结果为：100rpx

web前端_潘哥哥·2023-12-30 09:30

2018-08-16 小程序左右滑动有白边如何解决

解决方式：1、看下是否有块元素的宽度超过750rpx，并且最好box-sizing设置为border-box2、如果上面还解决不了，则添加如下：overflow-x:hidden;

tsl1127·2023-12-29 21:17

uniapp 相关知识点总结整理

一.单位1.换算规则：1px=2rpx1px=0.75pt=3/4pt1pt=1.33px=4/3px=8/3rpx1em=16px1em=12pt1px=1pt*图像分辨率/721.rpx是基于当前屏幕宽度与

小杨不香菜·2023-12-29 09:10

CSS尺寸单位详解（rpx、px、pt、em、rem、%、vh、vw的区别）

设备物理像素pt：屏幕宽、分辨率，其中每一小份就是1pt。css像素px：pc机大屏幕显示器，1px约等于0.76个物理像素手机小屏幕：以IPhone6为标准，物理像素750，分辨率3751px=2pt。px也是一个相对单位px是为了平衡一个元素在PC上显示的大小与在手机上显示的大小尽量一致而制定的。手机屏幕大小不一，差异较大，所以反而不希望一个元素在所有手机上显示一样大。而是希望能够自动等比缩放

abiao1981·2023-12-28 16:00

uniapp的css样式图片大小截图展示

目录截取图片前截取图片后第一种方式：代码第二种方式：代码最后截取图片前截取图片后第一种方式：代码.swiper-box-img{width:750rpx!

MFG_666·2023-12-28 12:18

uniapp实现瀑布流

item.title}}{{item.synopsis}}￥{{item.price}}￥{{item.original_price}}在修改样式.list{break-inside:avoid;width:330rpx

我爱学习yq·2023-12-26 23:09

小程序修改组件CheckBox的样式

image.pngimage.pngcheckbox.wx-checkbox-input{width:20rpx;height:22rpx;border-radius:5rpx;min-width:20rpx

wangxiurong·2023-12-23 11:03

uniapp实战 -- 个人信息维护（含选择图片 uni.chooseMedia，上传文件 uni.uploadFile，获取和更新表单数据）

memberStore.profile.nickname||memberStore.profile.account}}更新头像昵称未登录点击登录账号设置/*用户信息*/.profile{margin-top:20rpx

朝阳39·2023-12-23 10:15

微信小程序引入Vant Weapp修改样式不起作用,使用外部样式类进行覆盖

栗子(引入一个搜索框组件)实现效果:左侧有一个搜索文字背景为蓝色,接着跟一个搜索框wxml搜索wxss.container{width:750rpx;height:150rpx;background-color

糊涂涂糊涂涂·2023-12-23 09:53

【uniapp小程序-生成二维码+多个图片文字合并一张图】

#qrcode{opacity:0;position:absolute;left:-800rpx;}.share-canvas{width:720px;height:1280px;background:

聚宝盆_·2023-12-23 06:56

记录为 uni-app的扩展组件（uni-ui）和微信小程序标签添加行内样式的正确做法

正确为微信小程序标签添加行内样式，其做法是：（以view为例）goods_list也就是说，直接像写css一样直接写在双引号内就行了，无需考虑background-color要不要写成驼峰形式、400rpx

rolling_kitten·2023-12-23 06:19

微信小程序：轮播图中间大两边小、中间放大高亮显示

1:0}}"previous-margin="96rpx"next-margin="96rpx"bindchange="swiperChange">//jsdata:{currentIndex:0,posterList

叶落无痕123·2023-12-21 15:00

圆圈水波纹动效（华为充电效果）

absolute;top:15%;left:50%;transform:translate(-50%,0);z-index:-1;filter:contrast(10)hue-rotate(0);width:390rpx

良诤·2023-12-21 10:54

uniapp中底部菜单栏真机不显示

在page.json中进行设置：可能原因如下：1.设置的页面未定义2.设置菜单栏大小时单位必须写px，rpx不会显示！

前端小胡兔·2023-12-20 16:17

uniapp笔记

swiper<swiperclass="swiper"indicator-dots="true"autoplay="true"interval="5000"previous-margin="10rpx

曾帅168·2023-12-20 13:49

微信小程序中rpx和px有什么区别

在微信小程序中，`rpx`和`px`是两种不同的单位，用于适配不同屏幕的设备。-`px`（像素）：是一个相对于设备屏幕的固定单位。在不同的设备上，1个像素可能对应不同的物理像素点。

1号程序媛·2023-12-20 10:45

微信小程序实现横向滚动文字

translateX3.实现代码纯CSS文字滚动播放/*pages/another/scrNews/index.wxss*/page{background-color:pink;}.box{width:702rpx

苏苏哇哈哈·2023-12-20 02:22

WX小程序案例（二）：毒鸡汤列表-request-下拉

{{item.txt}}WXSS/*pages/network/network.wxss*/.box{display:flex;width:690rpx;height:300rpx;border:1pxsolidblack

Int mian[]·2023-12-20 00:15

移动端适配

判断用户使用的设备,跳转到相应的网站移动端适配(rem)元素的度量单位px像素em根据父元素来计算大小（项目中比较少用）rem根据根节点(html)元素的font-size进行计算大小vw/vh根据手机屏幕计算大小rpx

涅槃no重生·2023-12-19 04:43

微信小程序scroll-view的触发机制

组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

jingcairensheng·2023-12-18 15:39

前端速查速记系列----评论列表

tools.format(item.addtime,'YY-MM-DD')}}{{item.text}}wxss代码.box1{width:100%;height:auto;margin-top:30rpx

红烧栗子黄瓜鱼·2023-12-18 08:21

uni-app一些目录结构、方法、生命周期、打包、微信小程序登录与支付

、appid、logo、版本等打包信息用的，pages.json的作用是配置页面路径、页面窗口样式、tabBar、navigationBar等页面类信息2、页面适配方面uniapp页面像素单位使用的是rpx3

努力学习的木子·2023-12-18 03:06

微信小程序中wxss和css的差异

微信小程序中wxss和css的差异微信小程序中的WXSS（WeiXinStyleSheet）和普通的CSS（CascadingStyleSheets）有一些不同之处，主要包括以下几点：单位：WXSS中支持rpx

第10086个小白·2023-12-18 01:20

作中常用且容易遗忘的 CSS 样式

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

如果俞天阳会飞·2023-12-17 17:55

小程序中修改checkbox和radio的样式

修改checkbox样式.wxml可用2000个积分币抵扣.wxss/*checkbox未选中时样式*/checkbox.wx-checkbox-input{border-radius:3rpx;height

吃萝卜的小兔子·2023-12-17 13:26

微信小程序置顶导航，替代原生导航栏

的时候可以使用此组件替代原生导航栏，wx.getSystemInfoSync获取可使用窗口高度wxml代码：哪吒之魔童降世wxss代码：.header{ width: 100%; height: 58rpx

季夏梧桐·2023-12-17 12:51

微信小程序修改checkbox样式

1.WXML代码2.CSS代码checkbox.wx-checkbox-input{width:34rpx;height:34rpx;border-radius:50%;}/*checkbox选中后样式

_Me·2023-12-17 04:07

WX小程序案例（一）：弹幕列表

item.title}}已装填{{danmus.length}}条弹幕发送{{inputValue}}-->WXSS内容/*pages/formCase/formCase.wxss*//*.bk{width:750rpx

Int mian[]·2023-12-16 17:25

uniapp自定义tabbar

底部导航栏*/.footer{width:100%;display:flex;justify-content:space-between;background-color:#ffffff;height:100rpx

TechWhiz-晓同·2023-12-16 16:24

CSS 仿 -webkit-box-reflect 属性实现图片镜面倒影效果

实现方式方式一：-webkit-box-reflect属性布局样式.card{position:relative;margin-top:60rpx;width:54

RosaChampagne·2023-12-16 15:39

UNIAPP中文字上下左右居中

效果：index.vue:{{itemNew.name}}看详情index.css:父组件样式：.left{width:64rpx;height:184rpx;//display:flex;background

芷琪 i·2023-12-16 14:47

微信小程序css实现的联系客服动画样式

一、效果二、代码wxmlwxss.customer-service{width:100rpx;height:100rpx;background-color:var(--themeColor);position

糊涂涂糊涂涂·2023-12-16 08:50

网页内容高度不够时，让 footer 处于页面底部；高度超出时，位于内容最后的方法

$footer_height:80rpx;$bottom_space:40rpx;.main{height:100%;}.content{min-height:100%;box-sizing:border-box

海胆Sur·2023-12-16 07:01

在uniapp中，可以使用那些预定义的样式类

u-p-10：设置元素的上下左右边距为10rpx。u-p-t-10：设置元素的上边距为10rpx。u-p-b-10：设置元素的下边距为10rpx。u-p-r-10：设置元素的右边距为10rpx。

开心点啦.·2023-12-16 04:20

vue 切换标签

cunminSele(){this.styleShow='xuanze';},shangjiaSele(){this.styleShow='weixuanze';}}}.body{padding-top:151rpx

菜泡泡@·2023-12-16 04:46

微信小程序，添加地址，修改地址，删除地址及设为默认地址（上）

item.region[1]}}{{item.region[2]{{item.specific}}设为默认编辑删除添加新地址导入微信地址他的wxss/*尾部*/.footer{width:100%;height:100rpx

加油，前进·2023-12-15 20:17

自定义小程序swiper指示点样式

index.wxmlindex.wxss.warp{height:auto;position:relative;}.swiper{height:220rpx;}.swiper.img{width:100%

AHi_ae80·2023-12-15 19:41

微信小程序：模态框（弹窗）的实现

效果wxml上传文件确认取消wxss/*窗口*/.modal-content{background-color:white;width:90%;height:80%;border-radius:8rpx

雯0609~·2023-12-15 08:59

微信小程序：降低image层级，重叠排版方法

一般的方法，是白底圆角矩形的“margin-top:-80rpx;”这样就达到白底圆角矩形上移，压在图片上的效果。

web16888·2023-12-15 06:05

wxss模板语法

1.与css区别2.rpx概念3.wxss样式导入使用WXSS提供的@import语法，可以导入外联的样式表wxss不是css样式文件中可以导入其他样式表4.全局样式和局部样式

打酱油的；·2023-12-15 05:37

微信小程序之猜数字和猜拳小游戏

wxss代码四.猜拳页面（q1）代码wxml代码wxss代码js代码效果图app.json一、首页（index3）的代码wxml代码猜数字游戏规则猜拳wxss代码.box2{margin-top:200rpx

世俗ˊ·2023-12-06 06:33

小程序1rpx边框不完美

问题展示原因rpx类似rem，渲染后实际转换成px之后可能存在小数，在不同的设备上多多少少会存在渲染的问题。

@小花76·2023-12-05 14:06

【uniapp】小程序中input输入框的placeholder-class不生效解决办法

uniapp微信小程序，使用input组件时，想要改变提示词placeholder的样式，但是使用placeholder-class改变不了如下：.placeholder_class{font-size:26rpx

T3165919332·2023-12-05 08:21

微信小程序选项卡页面切换

选项卡效果切换如下：滑动即可对应切换wxml代码游戏专题挑战1.游戏2.专题3.挑战wxss代码：.tab{float:left;width:33.3333%;text-align:center;padding:10rpx0

小马大咖·2023-12-04 08:52

CSS一条语句实现弧形底部

实例：分析：如上图设计稿，红框是我们需要画的弧线部分，蓝线为垂直半径，黄线为水平半径假设盒子宽为750rpx，高度为70rpx。则代码如下border-radius:00375rp

秋月华星·2023-12-04 08:51

小程序选择框

WeiflR10的博客-CSDN博客_uniapp下拉框组件一、选择框基础功能效果图：wxml{{value}}请选择司机类别{{item.name}}wxss.inputPlaceholder{width:360rpx

WeiflR10·2023-12-04 08:49

uniapp实现用户全局设置应用字体大小（适用于各端）

比如，直接将font-size的rpx单位改成rem单位且可以自动等比例缩放效果当然你的移动端页面也会跟随更改~~~~思路1.使用插件p

AKA多个A·2023-12-04 03:53

对小程序的初了解

的区别标签名称不同HTML：div、a、span、imgWXML：view、text、image、navigator属性节点不同超链接提供了类似vue的模板语法数据绑定列表渲染条件渲染WXSS和CSS的区别新增了rpx

小巨要做一个很棒的人·2023-12-02 07:16

解决微信小程序的button按钮设置宽度无效的问题

important;.float_ball{width:100rpx!important;height:100rpx;border-radius:100%;padding:0;}

下班再说·2023-12-01 11:48

uniapp css 展示图片原始大小不压缩或者拉伸图片

height:"",};},mounted(){letthat=this;uni.getImageInfo({src:url,success:(image)=>{that.width=image.width+"rpx

小吴头大·2023-12-01 04:12

推荐频道

rpx