rpx记录使用

最新推荐文章于 2024-01-31 13:34:04 发布
最新推荐文章于 2024-01-31 13:34:04 发布
阅读量152 收藏
点赞数
分类专栏： css3 文章标签： 前端自适应
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43663775/article/details/115913348
版权

rpx 是相对于基准宽度的单位，可以根据屏幕宽度进行自适应。uni-app 规定屏幕基准宽度 750rpx。

开发者可以通过设计稿基准宽度计算页面元素 rpx 值，设计稿 1px 与框架样式 1rpx 转换公式如下：

设计稿 1px / 设计稿基准宽度 = 框架样式 1rpx / 750rpx

换言之，页面元素宽度在 uni-app 中的宽度计算公式：

750 * 元素在设计稿中的宽度 / 设计稿基准宽度

宁长风
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【润乾报表5】API 创建rpx文件
RQlyc的博客
09-12 1516
背景说明 有些业务，不方便在报表设计工具—设计器中设计好报表文件，而是在代码中，临时创建报表文件，这时，润乾报表用代码怎么创建报表文件呢，我们来看一个简单例子。 应用举例 <%@ page contentType="text/html;charset=gb2312" %> <%@ page import="com.raqsoft.report.usermodel.*"%&...
前端系列——小程序开发记录片
03-29
1、优先使用rpx替代px。 2、设计图通常按照iPhone6的基准。 3、当使用一些交互组件时，优先从官方组件里面挑选，没有再自定义组件。 4、自定义组件通常按照以下格式来写js。 Component({ options: { multipleSlots...
HTML5中如何实现rpx布局
杨若瑜的技术博客
12-10 4224
HTML5中如何实现rpx布局
HTML中使用 rpx 单位
hexianfan的博客
05-23 706
【代码】HTML中使用 rpx 单位。
rpx
a44185的博客
05-19 548
文章目录rpx是什么rpx和rem的区别原理rpx和iPhone6的关系 rpx是什么 rpx是一个单位。 rpx和rem的区别 rpx和rem一样，都是解决屏幕自适应的尺寸单位。 但是，rem需要手动换算，rpx是自动换算。 原理 不管手机屏幕是多大，rpx都统一规定了屏幕宽为750rpx。 1rpx的实际宽度，是屏幕宽度的750分之一。 rpx和iPhone6的关系 iphone6的实际宽度是375px。所以，这里就是375px=750rpx，即1px=2rpx ...
关于rpx
Dblack197的博客
07-19 153
在WXSS中，引入了rpx（responsive pixel）尺寸单位。引用新尺寸单位的目的是，适配不同宽度的屏幕，开发起来更简单。 对于rpx的定义、使用有一些疑问。
【微信小程序】rpx
qq_61845982的博客
07-10 7869
rpx是小程序独有的，用来解决屏适配的尺寸单位rpx的实现原理: rpx的实现原理非常简单:鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配 ，rpx把所有设备的屏幕，在宽度上等分为750份(即当前总宽度为750rpx) ·在较小的设备上，1rpx代表的宽度较小 ·在较大的设备上，1rpx所代表的宽度较大 小程序在不同设备上运行的时候，会自动............
记录微信小程序 height: calc(xx – xx)；无效问题
12-30
遇到一个小问题，记录一下 问题：在微信小程序中使用scroll-view标签时，用height:cale(xx – xx)设置高度无效，在page中设置高度为百分百依旧无效 解决办法：直接在最大的view标签中设置高度为百分百即可 <!-...
微信小程序个人任务记录demo源码下载，前端
02-22
6. **样式设计**：WXSS类似CSS，但有一些特有的规则，如尺寸单位rpx、样式隔离等。良好的样式设计能提升用户体验，使任务记录应用看起来更美观、易用。 7. **调试和测试**：微信开发者工具提供了强大的调试和测试...
mini_app_learn:小程序开发学习记录
03-08
2. WXSS：基于CSS，但增加了尺寸单位rpx，以及一些特定的样式规则，如相对定位、绝对定位等，适应不同屏幕尺寸。 三、JavaScript基础 JavaScript是小程序开发的主要语言，掌握其基本语法、数据类型、控制流、函数、...
记录微信小程序 height: calc(xx - xx)；无效问题
10-15
本文主要讨论了一个具体的问题，即在使用`height: calc(xx - xx)`计算高度时遇到的无效问题，以及一个关于jQuery中点击事件添加和移除样式的实例。 在微信小程序中，`height: calc(xx - xx)`是一种灵活的CSS属性，...
样式rpx
明月寄天涯的博客
04-25 188
uniapp H5 px转换rpx
最新发布
weixin_45563734的博客
01-31 1026
uniapp H5 px转换rpx
uniApp开发h5踩坑 px转rpx转rem 1px转2rpx 2倍
lqins的博客
08-23 4694
uniApp开发h5踩坑 px转rpx转rem 1px转2rpx 2倍
什么是rpx尺寸单位？
热门推荐
小鱼儿~同学
02-11 2万+
rpx （ responsive pixel）响应单位 rpx是微信小程序独有的、解决屏幕自适应的尺寸单位 可以根据屏幕宽度进行自适应，不论大小屏幕，规定屏幕宽为750rpx 通过 rpx 设置元素和字体的大小，小程序在不同尺寸的屏幕下，可以实现自动适配 rpx 和 px之间的换算 在普通网页开发中，最常用的像素单位是px 在小程序开发中，推荐使用rpx这种响应式的像素单位进行开发 以...
补充说明rpx
skkkkkkkkk的博客
07-18 257
rpx使用方法 ​ 小程序规定了设备的屏幕无论什么尺寸，其都为750 rpx。但是对于不同设备的高度，没有明确规定，所以在设计稿中屏幕的高度，要做高度的 rpx 换算。 ​ 例如：iPhone 6 （375 × 667） ​ 屏幕高度rpx = 750 * 667 / 375 = 1334 rpx 所以在设置样式时，假设设计稿中的盒子宽为200，高为100，那么可以在样式中写： .box{ width: calc(750rpx*200/375); height: calc(1334rpx*
微信小程序--rpx单位的理解
HopCoder
05-28 1万+
如何理解rpx？ rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。 小测试： 1、rpx 全称是什么？（请填写英语全称） responsive pixel 2、iphone ...
table中的th，td宽度设置无效
weixin_43663775的博客
10-26 4086
// 给table设置table-layout: fixed; table{ table-layout: fixed; }
微信小程序制作学习打卡记录页面代码
05-22
以下是一个简单的微信小程序打卡记录页面的代码示例： ```html <!-- index.wxml --> <view class="container"> <view class="title">打卡记录</view> <view class="card" wx:for="{{records}}" wx:key="index"> <view class="card-title">{{item.date}}</view> <view class="card-content"> <view class="card-item"> <text>早起打卡：</text> <text class="{{item.early ? 'checked' : ''}}">{{item.early ? '已打卡' : '未打卡'}}</text> </view> <view class="card-item"> <text>跑步打卡：</text> <text class="{{item.run ? 'checked' : ''}}">{{item.run ? '已打卡' : '未打卡'}}</text> </view> <view class="card-item"> <text>学习打卡：</text> <text class="{{item.study ? 'checked' : ''}}">{{item.study ? '已打卡' : '未打卡'}}</text> </view> </view> </view> </view> ``` ```css /* index.wxss */ .container { padding: 20rpx; } .title { font-size: 28rpx; font-weight: bold; margin-bottom: 20rpx; } .card { margin-bottom: 20rpx; border: 1rpx solid #ccc; border-radius: 10rpx; overflow: hidden; } .card-title { background-color: #f5f5f5; font-size: 26rpx; font-weight: bold; padding: 10rpx; } .card-content { padding: 10rpx; } .card-item { display: flex; align-items: center; margin-bottom: 5rpx; } .checked { color: green; } ``` ```javascript // index.js Page({ data: { records: [ { date: '2022-01-01', early: true, run: false, study: true }, { date: '2022-01-02', early: false, run: true, study: false }, { date: '2022-01-03', early: true, run: true, study: true } ] } }) ``` 这个示例中，我们使用了 WXML 模板语言来渲染打卡记录页面的内容，并使用了 WXSS 样式语言来设置页面的样式。在 JavaScript 文件中，我们使用了 Page() 函数来定义页面，并将打卡记录数据存储在 data 对象中，以便在页面中使用。 可以根据实际需求修改代码和样式，实现自己想要的打卡记录页面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值