rpx 第21页

uni-app 自适应各种机型状态栏

//这里是适配的状态栏的代码{{choosenCity}}标题.top1{position:fixed;top:0;z-index:100;}.statbar{width:750rpx;height:var

_文强·2020-09-14 11:38

前端开发——从px到rem再到rpx的知识点简介和总结

一、px(pixel)物理像素：设备屏幕实际拥有的像素点。比如iPhone6的屏幕在宽度方向有750个像素点，高度方向有1334个像素点，所以iPhone6总共有750*1334个物理像素。逻辑像素：也叫“设备独立像素”（DeviceIndependentPixel,DIP），可以理解为反映在CSS/JS代码里的像素点数。具体参考文章：CSS中的px与物理像素、逻辑像素、1px边框问题二、rem(

暮色岚光·2020-09-14 06:43

微信小程序 css实现组件底部大圆弧效果

1.wxml2.wxss.area{display:relative;flex-direction:column;align-items:center;height:300rpx;}.area::after

ﾉBye~·2020-09-14 02:59

微信小程序自定义 scroll-view 滚动条

100vh;background:rgb(111,80,65)}.scroll-view{display:flex;width:100%;white-space:nowrap;padding-top:20rpx

xianshengwen·2020-09-13 23:59

微信小程序设置box-shadow阴影在真机上无效

微信小程序设置box-shadow阴影无效，如下：box-shadow:0rpx10rpx50rpx10rpx#5555551A;在开发环境上有效，但在真机上无效。

郑廿三·2020-09-13 22:34

微信小程序实现运动步数排行（可删除）

item.xin}}-->删除wxss/*pages/leftSwiperDel/index.wxss*/view{box-sizing:border-box;}.item-box{width:700rpx

祈澈菇凉·2020-09-13 19:26

微信小程序不同机型的兼容布局解决

rpx适配rpx是小程序中的尺寸单位，它有以下特征：小程序的屏幕宽固定为750rpx（即750个物理像素），在所有设备上都是如此1rpx=（screenWidth/750）px，其中scr

曾小白不想写SQL·2020-09-13 16:48

微信小程序：适配手机屏幕宽高度的设置方法

我们在做小程序页面时常常会需要设置背景，而不同手机的屏幕宽高度并不一样，虽然设置宽度为750rpx来解决宽度自适应的问题，但高度却没有这种方法，下面来简单介绍一下设置高度自适应的方法：一、750rpx自适应宽度

neti觉得时日不多·2020-09-13 13:33

小程序导航栏全屏navigationStyle自定义导航栏，小程序轮播图导航栏

css.swiper{position:fixed;width:750rpx;height:422rpx;}swiper{height:422rpx;}jsdata:{background:[{key:

子钦加油·2020-09-13 13:09

收货地址下边的平行四边形彩色线条

以小程序为例.city:nth-child(odd){width:60rpx;height:10rpx;margin-right:23px;background-color:#0076FF;color:

子钦加油·2020-09-13 13:09

将小程序页面改成VUE框架的H5页面记录

1.创建H5项目2.引入文件，复制css，把rpx改成px，在html引入css，并且使样式兼容手机端。

a_靖·2020-09-13 12:09

微信小程序设置背景图片不显示问题解决方法

最近开发小程序的过程中遇到了这样一个小问题，在wxss文件中通过background设置背景图片，要实现背景图片上显示文字的效果，发现背景图片不显示，设置背景图片的代码如下：.test{width:100rpx

codezha·2020-09-13 11:47

小程序绘制饼状图

写在前：按照比例绘制饼状图实现效果：布局样式page{width:100%;height:100%;}.left{width:300rpx;height:300rpx;display:flex;justify-content

美的人是吃货·2020-09-13 11:23

【微信小程序】利用CSS绘制扇形

10rpxsolidtransparent;border-right:10rpxsolidtransparent;border-top:10rpxsolidrgba(51,55,69,1);margin-left:20rpx

三一.·2020-09-13 11:07

微信小程序-图片上传chooseImage 预览图片previewImage，视频上传chooseVideo，显示隐藏

Wxml：Wxss:/上传图片多行变一行显示/.img_style{flex-direction:row;display:flex;}/上传块大小/.img_bg{width:240rpx;height

萧逸晨·2020-09-13 09:18

修改小程序open-data头像样式修改

效果wxml代码实现wxss代码实现.userinfo-avatar{overflow:hidden;display:block;width:120rpx;height:120rpx;border-radius

省钱兄·2020-09-13 09:31

小程序开发遇到的一些问题

模拟器字体和真实机器字体大小不一致导致原因是所有字体单位使用的是rpx，小程序框架提供了rpx（responsivepixel），可以根据屏幕宽度进行自适应。

pengliangs·2020-09-13 05:08

UI设计中，文本底部添加下换线

最近在开发项目，针对小程序前端，显示文本需要添加下划线问题，起初是通过border-bottom:1rpxsolid#eee;进行编写，但是总是觉得线的高度过于粗，移动端最小单位值是1即:1rpx1px

aiqu2133·2020-09-13 05:41

原生小程序封装跑马灯(由多条衔接改动得到)

100%;}to{margin-left:var(--marqueeWidth--);}}.marquee_container{/*background-color:#0099FF;*/padding:12rpx0

Lucky伯爵·2020-09-13 03:08

uniapp H5端实现PC端适配

1.创建pc.js，PC端样式就可以实现1upx=1rpx=1px；这样非常方便的1:1还原设计图了当然如果你的设计图不是1920，比如是1366，那下面就改成这样window.innerWidth=750

Lucky伯爵·2020-09-13 03:35

微信小程序之跑马灯效果(单条数据)

wxml{{text}}wxss.box{width:100%;height:75rpx;line-height:75rpx;background:#eee;position:relative;}.boxtext

Lucky伯爵·2020-09-13 03:35

微信小程序多张image图片排列有空隙解决方案

.det-pics-wimage{width:100%;min-height:630rpx;}.det-pics-w{position:relative;}第一种解决方案：flex.det-pics-wimage

青衫折扇·2020-09-13 02:09

小程序开发心得

1设计稿如果是750*1334那么在iphone7机型里1rpx<-1px[微信小程序<-设计稿]如果是375*667那么在iphone7机型里2rpx<-1px2appId是小程序的身份证

wangyoucaoxiaoxiao·2020-09-12 23:19

uniapp px rpx 互相转换

1、rpx转pxuniapp内置了rpx转px的方法，源码见下方：//100为100rpx的值varpx=uni.upx2px(100);2、px转rpx由于uniapp已经有upx2px的方法，可以简单的得出反向取值的公式

黄河爱浪·2020-09-12 23:05

微信小程序----贪吃蛇

snake.wxss*/#snake{display:flex;flex-direction:column;width:100%;height:100%;}.score{display:flex;margin:20rpx

猜不到我是谁·2020-09-12 23:27

uni-app 让移动端的高度自适应

onLoad(){const_this=this;uni.getSystemInfo({success:res=>{console.log('手机可用高度:'+res.windowHeight*2+'rpx

UserGuan·2020-09-12 21:45

将小程序的wxss转换成css

小程序的css基本上和H5的一致，除了rpx单位H5不支持，其他都是css3的子集。因为小程序要和h5做同样的页面，样式方面能通用就更好了。

ccyccsdn·2020-09-12 21:49

微信小程序商品评价，默认5星

/self/image/star-1.png/pages/self/image/star-0.pngindex.wxsspage{background:#f4f4f4;}.p20{padding:20rpx

小小笔记本·2020-09-12 21:56

动手撸一个微信小程序学生课程表页面

开始写代码顶部：使用wx的for循环周{{item}}样式如下：.top{display:flex;flex-direction:row;margin-left:35rpx;background-color

邵磊·2020-09-12 19:58

实习日志Day6

组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。属性类型默认值必填说明

信管117102曾燃亮·2020-09-12 14:47

在不对项目进行大改的情况下解决mpvue默认的px转rpx的问题

于是打开开发工具调试给她看，结果，哦豁，还真不是1px，是2rpx。这就奇怪了，我明明写死的1px，怎么调试的时候会变成2rpx呢？于是我推测，mpvue默认有一个px转rp

姜雪辞·2020-09-12 13:51

实训Day06学习日志

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

阿栋_·2020-09-12 12:14

小程序标签页切换效果

welcomecometo达叔welcomecometo达叔welcomecometo达叔.wxss.tab{float:left;width:33.3333%;text-align:center;padding:10rpx0

weixin_30550081·2020-09-12 11:24

达达前端·2020-09-12 11:37

微信小程序日历左滑右滑特效

datepicker.wxml的页面结构左右滑动页面试一下效果{{currentDate}}{{currentDate}}二、datepicker.wxss的样式/*例子的样式*/.container{font-size:28rpx

一枚攻城狮·2020-09-12 08:18

微信小程序tab切换效果

微信小程序中tab切换效果简单实现方法梨子wxml京东天猫京东子内容天猫子内容wxss.a_bar{position:relative;}.more_chanpin.a_bartext{width:375rpx

是小汤圆啊·2020-09-12 07:04

微信小程序 - 展开收缩列表

navigator-box{2opacity:0;3position:relative;4background-color:#fff;5line-height:1.41176471;6font-size:34rpx

weixin_34357928·2020-09-12 07:02

微信小程序scroll-view高度设置及scroll-into-view的使用跳转

不必要非用rpx或者px）目前完成了点击添加索引class显示效果，及右侧分类跳转相应位置。

章鱼no丸子·2020-09-11 20:03

微信小程序swiper 前后边距的使用-----previous-margin和next-margin的使用

previous-margin：前边距，可用于露出前一项的一小部分next-margin：后边距，可用于露出后一项的一小部分假设设置一个图片的尺寸为宽为600rpx,高为600rpx，前一张图片露出为20rpx

前端对象·2020-09-11 18:07

内容强制不换行并且自动撑开容器宽度的css

min-width:60rpx;align-self:baseline;flex-shrink:0;

小巷而已·2020-09-11 18:37

小程序实现毛玻璃的效果

filter这个属性实现，在有弹框弹出的时候背景出现高斯模糊的效果写个小例子记录一下，这个是背景是地图的情况下，做的处理，不管是文字还是图片什么的，在弹出框出来的时候给背景添加filter:blur(20rpx

weixin_43831302·2020-09-11 17:26

如何在微信小程序自定义个性化radio组件

zradio[index].name}}{{zradio[index].name}}2、WXML：3、WXSS：/*pages/radio/radio.wxss*/.container{height:300rpx

徒步天涯2017·2020-09-11 16:35

微信小程序随机验证码的实现

具体实现方法不多说直接上代码{{code}}换一张.yanzhengma{height:100rpx;display:flex;align-items:center;justify-content:center

子谦呀·2020-09-11 16:28

微信小程序、前端：背景图片样式拉伸不变形

wxml:主要是下面四行代码css:.lecturer_head{background:no-repeatcenter0rpx;background-size:173rpx173rpx;width:173rpx

Dove言和·2020-09-11 15:57

【微信小程序】小程序实现首页轮播图效果

index.wxmlindex.wxss.carousel{width:100%;background-color:rebeccapurple;}.carousel_swiper{width:100%;height:400rpx

热心网友大熊·2020-09-11 13:03

kbone 高级 - 使用 rem

kbone没有支持rpx，取而代之的是可以使用更为传统的rem进行开发。

千锋教育官方博客·2020-09-11 12:32

微信小程序：模糊查询--防抖和数据节流

模糊查询防抖和数据节流结构：search.wxml取消{{item.goods_name}}样式：search.lesspage{background-color:#dedede;padding:20rpx

落花流雨·2020-09-11 11:52

小程序知识点分享（三）

组件修改样式固定指示条宽度，根据轮播图片数量均分swiper的class=“swiper-box”.swiper-box.wx-swiper-dots.wx-swiper-dots-horizontal{top:186rpx

月亮与六便士0520·2020-09-11 09:02

uniap空页面

组件empty.vuebug:props默认值为defaultbug：动态style:style="{marginTop:top+‘rpx’}"，marginTop要大写bug：动态style:style

小曲曲·2020-09-11 07:03

文字两端对齐

商户名称客户姓名手机号地址商户类型账号密码wxss：若安卓的系统，text-align-last:justify一步即可.column{display:flex;flex-direction:column;margin-left:20rpx

W_SSNY·2020-09-11 00:49

推荐频道

rpx