程序员经验分享-hwhale

uni-app css尺寸单位rpx介绍

2023-11-18

一，前言

1.在使用uni-app开发小程序时支持的尺寸单位如下

（1）基础单位：px ， rpx
（2）h5单位：rem ，vm ，vh

2.rpx是微信小程序提出的一种响应式px

二，rpx介绍

1.现实情况下，ui设计师只提供一个分辨率的图，严格按设计图标注的 px 做开发，在不同宽度的手机上界面很容易变形，而且主要是宽度变形。高度一般因为有滚动条，不容易出问题。由此，引发了较强的动态宽度单位需求，从而有了rpx单位

2.rpx 是相对于基准宽度的单位，可以根据屏幕宽度进行自适应，以 750 宽的屏幕为基准，750rpx 恰好为屏幕宽度，换句话说，在rpx世界中，屏幕的宽度就是750rpx

三，转化关系

1.为了还原ui设计稿，我们就得知道ui设计稿的px 到底等于多少 rpx，计算公式为：750 * 元素在设计稿中的宽度 / 设计稿基准宽度

  • 例如若设计稿宽度为 640px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 uni-app
    里面的宽度应该设为：750 * 100 / 640，结果为：117rpx

  • 若设计稿宽度为 375px，元素 B 在设计稿上的宽度为 200px，那么元素 B 在 uni-app 里面的宽度应该设为：750 * 200 / 375，结果为：400rpx

2.为了方便开发，HBuilderX 提供了自动换算的工具，只需填入1rpx=比例值(px) 即可，公式为 设计稿基准宽度/750
在这里插入图片描述

四，注意事项

1.早期uni-app提供了upx，目前已改成rpx

2.为了方便开发，设计师可以用 iPhone6 作为视觉稿的标准，或者设计宽度为750px

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

微信小程序

Uniapp

css

ui

uni-app css尺寸单位rpx介绍 的相关文章

  • 使用 bootstrap 将并排的网格位置交换到顶部和底部

    我有两个 div 内容和图像 它们在中等屏幕中并排放置 col md 6 内容 col md 4 图片 因此 当屏幕尺寸更改为小屏幕和 xs 屏幕时 这些 div 不应该并排放置 它们应该像这样顶部和底部对齐 image content 这

  • YouTube 视频内容涵盖 IE < 9 中的 CSS 下拉菜单

    我使用 CSS 创建了下拉菜单 并将 YouTube 视频放置在导航栏下方的框中 使用 IE 8 时 下拉菜单落后于 YouTube 视频 尽管带有导航栏的 div 的 z index 比带有 YouTube 视频的 div 更高 该问题在

  • 是否可以使用“grid-template-areas”删除网格中空行的高度？

    我有一个包含八张 或更少 卡片的网格 我希望卡片自动放置在网格中 而不知道它们的宽度和高度 也就是说 宽度和高度应该在网格样式中指定 当我展示全部 8 张卡片时效果非常好 例子 grid template areas card 1 card

  • 如何左对齐这些 Bootstrap 表单项？

    我是第一次使用 Bootstrap 在将此表单水平向左对齐时遇到很多麻烦 列表项是水平的 因为它们应该是水平的 但我希望控制标签 表单标签的 Bootstrap 类 全部位于向左浮动的相同位置 该表单包含在跨度为 7 的 div 中 因为我

  • 如何默认或通过 CSS 将详细信息元素设置为 OPEN

    HTML5 添加了两个新元素 可用于标记文章的目录 details and summary 详细信息元素默认为关闭状态 隐藏除摘要元素之外的所有内容 单击时 它会展开以显示其内容 当它执行此操作时 它会向详细信息元素添加一个 open 属性

  • Windows 与 MacOS 上的不同大小字体渲染。怎么解决？

    我一直想知道为什么在 Windows 上我的字体看起来比 OSX 上更小 而且更蹩脚 Mac 与 Windows 的屏幕截图 http screencast com t UUxqLRhM http screencast com t UUxq

  • 带有覆盖CSS的背景图像

    我如何在 CSS 中设计带有叠加层的背景图像 就像这个示例图像一样 这是代码 我想添加tour类到背景图像和叠加效果 div class tour div class container div class row div class co

  • CSS以两种颜色显示一个字符[重复]

    这个问题在这里已经有答案了 css中是否可以用两种颜色制作单个字符 我的意思是例如字符 B 上半部分为红色 下半部分为蓝色 h1 font size 72px background webkit linear gradient red 49

  • 如何在 CSS 中将容器内的多个 div 居中

    我正在测试像 Windows Metro 风格的中心分隔线 container height 300px width 70 background EEE margin 10px auto position relative block ba

  • JavaScript 中的 CSS 边框

    我正在使用下面的过程从 JavaScript 修改 CSS 但它没有给出任何结果 任何人都可以检查代码并让我知道正确的方法 我需要带有半径的表格边框 这是我的表结构 table width 400 border 0 cellspacing

  • phonegap 中的 HTML 按钮没有反应

    我有三个 HTML 按钮 当我单击它们时 没有外部发光 并且它们不执行任何操作 我也尝试过对它们进行样式设计 但它们仍保留默认设计 我刚刚使用了普通代码 我只是不知道它们出了什么问题

  • 如何创建一个对角分割的页面，两半是可点击的链接

    我需要创建一个对角分割的登陆页面 像这样的东西 我需要页面的两个区域都是可单击的 并且在最好的情况下 所有内容都应该动态地适应用户的显示器 以便显示器始终分成两半 我该怎么做 我应该使用画布吗 欢迎任何建议 以及如果我使用画布可能的后备方案

  • 如何使选择框水平和垂直居中

    我正在尝试将选择框水平和垂直居中 这是 jsfiddle http jsfiddle net j3r9Lp81 http jsfiddle net j3r9Lp81 CSS div currency text align center HT

  • 光标：属性值无效

    我已经找这个很久了 可悲的是 我发现的所有内容都不适合我 我的自定义光标在 Firefox 上不起作用 我有一个漂亮的 无效属性值 同样在 Firefox 开发版中我也遇到了同样的错误 但显示了光标 Chrome 没问题 显示没有任何错误

  • Ionic - 使用 item-avatar 类在项目列表中垂直居中文本

    我尝试将离子列表添加到我的应用程序中 其中项目构建如 Image Text Button 图像和按钮垂直居中 但文本没有 我尝试了一些在互联网上找到的CCS 它在浏览器预览中运行良好 但在真实设备上 Samsung Galaxy S3 Mi

  • 粉碎一个元素，向随机方向发送碎片

    我试图 粉碎 一个元素 例如 一个图像 并将其碎片朝随机方向飞行 当碎片到达目的地时 即x距离 以像素为单位 它们变成原始图像的较小版本 jQuery UI 的explode http api jqueryui com explode ef

  • 元素在主体内找不到足够的空间 - JavaScript 样式

    相关信息 该页面包含两个元素 An

  • 如何使用 Angular CLI 添加应用程序范围的 CSS 文件？

    我想向我的 Angular 2 应用程序添加一些分片样式 例如字体和配色方案等将在任何地方使用的东西 过去 我总是通过在索引页面添加这样的标签来完成此操作 这不适用于 CLI 用于为应用程序提供服务的任何内容 我尝试在构建后手动将 css

  • 用于生成多色文本的 jQuery 插件，该文本可在悬停时改变颜色

    我想为各种链接生成多色文本 并从预先指定的颜色数组中为各个字母随机分配颜色 当将鼠标悬停在带有文本的 div 上时 颜色会发生变化 我正在考虑一个 jQuery 插件 脚本将是可行的方法 我想知道是否存在这样的插件或近似插件 Thanks

  • 具有相等宽度和高度 TD 的响应式表格

    如何创建每个单元格 TD 具有相同宽度和高度的响应式 HTML 表格 因此 当我调整浏览器窗口的大小或调整表格容器的大小时 表格将调整大小 但每个单元格将具有相同的高度和宽度 基金会不关心这个 当我用固定宽度和高度 以像素为单位 初始化 T

随机推荐

  • Unity的Text Mesh Pro文字显示重叠处理

    在使用Text Mesh Pro的时候 出现文字重叠 如图 在编辑器内显示是正确的 最后发现是换行造成的 原本的文字是从pdf中复制过来 就会重叠 在记事本中删除换行用回车再次换行就能正确显示

  • CCS5.2.1/5.5 错误-No source available for main()

    1 错误现象 在CCS5 2 1开发环境中从别处导入项目并编译完成后 下载程序时出现如下图所示错误 备注 当前使用的compiler版本为C6000v7 4 14 2 解决办法 进入项目属性设置页面 可以看到当前的调试模式为 Suppres

  • 详解PyCharm配置Anaconda的艰难心路历程

    本文来源于公众号 csdn2299 喜欢可以关注公众号 程序员学府 这篇文章主要介绍了详解PyCharm配置Anaconda的艰难心路历程 小编觉得挺不错的 现在分享给大家 也给大家做个参考 一起跟随小编过来看看吧 在安装好pycharm后

  • 基于JAVA+SpringBoot+VUE的心理健康测试系统的设计与实现

    全网粉丝20W csdn特邀作者 博客专家 CSDN新星计划导师 java领域优质创作者 博客之星 掘金 华为云 阿里云 InfoQ等平台优质作者 专注于Java技术领域和毕业项目实战 文末获取项目下载方式 一 项目背景介绍 随着现代社会的

  • Redis常用的5种数据类型底层结构是怎样构成的

    前言 Redis是一个基于内存中的数据结构存储系统 可以用作数据库 缓存和消息中间件 Redis支持五种常见对象类型 字符串 String 哈希 Hash 列表 List 集合 Set 以及有序集合 Zset 我们在日常工作中也会经常使用它

  • 架构师成长之路

    延迟队列实现 基于监听key过期实现的延迟队列实现 这里需要继承KeyspaceEventMessageListener类来实现监听redis键过期 public class KeyExpirationEventMessageListene

  • Java CGLIB动态代理示例

    1 CGLIB动态代理简介 JDK动态代理是利用反射机制生成一个实现代理接口的匿名类 在调用具体方法前调用InvokeHandler来处理 而cglib动态代理是利用asm开源包 对代理对象类的class文件加载进来 通过修改其字节码生成子

  • pandas基础用法详解

    pandas基础用法详解 本文旨在总结pandas的基础用法 越用越发感觉基础的重要性 复杂和高级只是基础的衍生 扎实的基础和深刻的理解能帮助我们更快的弄懂复杂的东西 基础的熟悉的也就就能轻松发挥了 pandas是什么 Pandas 是一个

  • rabbitmq的DefaultConsumer使用和不同交换机模式的代码示例

    Defaultconsumer public class Consumer public static void main String args throws IOException TimeoutException 获取TCP长连接 C

  • 基于状态机的单个按键长按，短按实现复用

    开博第一文 希望再次记录学习的过程 按键扫描 单片机里面再基础不过的程序了 但对于初学者来说 用好按键也不是一件简单的事情 在毛老师的介绍下 第一次知道了状态机的思想也可以用于单片机的程序设计 感觉很是新奇 看了老师给发的几个文档后对状态机

  • 毕业设计 嵌入式 MP3音乐播放器设计与实现

    文章目录 1 简介 2 绪论 2 1 课题背景与目的 3 系统设计 3 1 系统架构 3 2 软件部分设计 3 3 实现效果 3 4 部分相关代码 4 最后 1 简介 Hi 大家好 学长今天向大家介绍一个 单片机项目 基于单片机的MP3音乐

  • 数据结构---HashSet存值和取值

    HashSet存值和取值 存 取 HashMap实现了Map接口 而HashSet实现了Set接口 HashMap用于存储键值对 而HashSet用于存储对象 HashMap不允许有重复的键 可以允许有重复的值 HashSet不允许有重复元

  • 【一千个论文合集】计算机科学的26个细分领域近年必读论文集合

    文章目录 1 机器学习 2 计算机视觉 3 自然语言处理 4 数据挖掘 5 机器人 6 知识工程 7 模式识别 8 信息检索与推荐 9 数据库 10 人机交互 11 计算机图形学 12 多媒体 13 可视化 14 数据科学 15 安全与隐私

  • vue利用 sortable 完成表格拖拽

    先讲一下vue2 使用sortable完成表格拖拽 不只是表格 div也可以实现 但我项目中是表格拖拽 github地址 安装 npm install sortablejs save 使用 我的项目中是拖拽一个小按钮移动 而不是整行

  • umi:配置式路由

    场景描述 很多时候 我们需要做到简单的路由拦截 比如用户未登录的时候 我们需要跳转到登录页面 等到用户登录后在重新跳转到之前的页面 而很多情况下这些是约定式路由无法完成的 就需要我们配置式路由 论述 umi自带的约定式路由 可以自动的生成路

  • element-ui的table表格实现跨页多选及回显效果

    效果图 安装 Element ui 和 egrid 基于 Element UI Table 组件封装的高阶表格组件 可无缝支持 element 的 table 组件 npm i element ui S npm i egrid S 引入 E

  • kubectl常用命令

    alias k kubectl alias kc k create f alias kgp k get pods alias kdp k describe pods alias kdep k delete pods alias kl k l

  • mysql 判断字符串相等_「8」掌握MySQL比较运算符是很有必要的

    本文要的主题就是MySQL比较运算符 也就是通过各类案例来看看其运行得到的结果是什么 以及掌握其规则 首先 我们看看比较运算符有哪些种类 接下来我们就通过案例的案例的方式来逐一学习 1 等于运算符 是用来判断数字 字符串和表达式是否相等 如

  • 面向对象编程中composition、aggregation、association的区别

    在面向对象程序设计中 对象的关系主要有三种 composition aggregation association composition 组合 复合 对象x的生命期由唯一拥有者owner控制 owner析构时会把x同步析构 例如Engin

  • uni-app css尺寸单位rpx介绍

    一 前言 1 在使用uni app开发小程序时支持的尺寸单位如下 1 基础单位 px rpx 2 h5单位 rem vm vh 2 rpx是微信小程序提出的一种响应式px 二 rpx介绍 1 现实情况下 ui设计师只提供一个分辨率的图 严格

热门标签