uni-app 通用尺寸单位rpx及样式

浅浅的花香味﹌ 2023-06-25 10:23 17阅读 0赞

**官方文档：**

**rpx **即响应式px，是一种根据屏幕宽度自适应的动态单位。uni-app规定屏幕的基准宽度为750rpx。

## **关于rpx说明** ##

设计师在提供设计图时，一般只提供一个分辨率的图，作为开发者如果严格按照设计图标注的px做开发，在适配不同宽度的时候很容易变形，而且是宽度变形，因为有滚动条，高度不会出问题。

微信小程序设计了rpx解决了此问题，而uni-app在App端、H5端也都实现了对 **rpx** 的支持。

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

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

所以，在实际开发中，1 rpx = 750 \* （ 设计稿宽度 / 设计稿基准宽度 ）

很好理解，比如：

1、设计稿的基准宽度为 750px, 有一个红色方块宽度为100px，换算成rpx 结果为：**100rpx ，也就是说 1rpx = 1px**

750 * 100 / 750

2、设计稿为640px，红色方框宽度为100px，换算成rpx结果为：**117rpx**

750 * 100 / 640

**注意****：**

（1）rpx是宽度相关的单位，屏幕越宽，元素会 越大，如果不想随着屏幕 宽度缩放， 请使用px 。

（2）字体 或者 高度使用了rpx ， 那么需注意这样的写法意味着随着屏幕变宽，字体会变大、高度会变大。

（3）rpx不支持横屏切换，如果使用rpx 建议锁定屏幕方向。

（4）早期uni-app推荐使用upx，目前官方 已经推荐统一改为rpx了 。[查看详情][Link 1]——公告网址： [https://ask.dcloud.net.cn/article/36130][Link 1]

## ##

## 样式导入 ##

关于导入外联样式， 需要使用 ** @import  ，**最后以分号结束

@import "../../common/uni.css";

注意：

（1）在uni-app中不能使用通配符选择器 \*

（2）page 相当于body 节点

/*设置页面背景颜色*/
    page {
        background-color: #666
    }

# #

##  全局样式与局部样式 ##

**全局样式：**

定义在App.vue中的样式为全局样式，可以作用于每个页面。

**局部样式：**

定义在pages目录下的 .vue文件中的样式为局部样式，局部样式只会作用于当前页面，如果全局样式与局部样式类名重复，局部样式会覆盖全局样式。

##  css变量 ##

1、--status-bar-height

/* --status-bar-height 系统状态栏高度,在小程序中固定位为25px，在5+App为手机实际状态高度 */
    .view{
        hegiht: var(--status-bar-height)
    }

2、--window-top  内容区域距离顶部的距离。

3、--window-bottom 内容区域距离底部的距离。

小技巧：

快速书写css变量的方法：在css中敲 hei

[Link 1]: https://ask.dcloud.net.cn/article/36130

发表评论取消回复

表情：

评论列表（有 0 条评论，17人围观）

还没有评论，来说两句吧...

相关阅读

相关【小程序】wxss与rpx单位以及全局样式和局部样式

目录 WXSS 1. 什么是 WXSS 2. WXSS 和 CSS 的关系 rpx 1. 什么是 rpx 尺寸单位 2. rpx 的实现原理 3. rpx 与 p

叁歲伎倆/ 2024年03月30日 11:29/ 0 赞/ 64 阅读

相关 uni-app尺寸单位

uni-app支持的通用的css单位包括px、rpx。 px即屏幕像素 rpx即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx

悠悠/ 2023年07月19日 10:42/ 0 赞/ 35 阅读

相关 uni-app之响应式单位upx和rpx

官方推荐使用rpx替代upx 在普通css写法里，upx会被编译器编译；但动态绑定时，`upx`不能像rpx那样直接支持动态绑定，还得再使用`uni.upx2px`方法

￡神魔★判官ぃ/ 2023年06月27日 05:31/ 0 赞/ 22 阅读

相关 uni-app 通用尺寸单位rpx及样式

官方文档： rpx 即响应式px，是一种根据屏幕宽度自适应的动态单位。uni-app规定屏幕的基准宽度为750rpx。关于rpx说明设计师在提供设计图时，一般只提

浅浅的花香味﹌/ 2023年06月25日 10:23/ 0 赞/ 18 阅读

相关尺寸单位换算

这两天用swing写打印，发现JDK文档里有一个说明：以 1/72 英寸为单位，这个进行纸张和屏幕大小换算可麻烦了，1/72英寸又是啥东西，一头雾水。去找了下资料，终于找到换算

╰半橙微兮°/ 2022年07月21日 01:48/ 0 赞/ 381 阅读

相关 css尺寸单位

css尺寸单位有如下：像素px（pixls）:在web上，像素px是经典的度量单位，很多其他长度直接映射像素处理。 % ：百分比 in ：英寸 1in = 2.5

红太狼/ 2022年06月06日 10:07/ 0 赞/ 328 阅读

相关微信小程序-rpx尺寸介绍

IT实战联盟博客：[http://blog.100boot.cn][http_blog.100boot.cn] 最近开始入手微信小程序，如果有前端开发经验的同学

约定不等于承诺〃/ 2022年06月03日 22:40/ 0 赞/ 419 阅读

相关小程序中使用rpx单位,布局适配方案（rpx、px、vw、vh）

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

秒速五厘米/ 2022年04月16日 01:29/ 0 赞/ 2297 阅读

相关 css 小程序单位rpx及rem

rpx 微信小程序单位规定屏幕宽度为750rpx rpx和px的转换如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，

àì夳堔傛蜴生んèń/ 2021年09月19日 13:50/ 0 赞/ 501 阅读

相关微信小程序尺寸单位rpx以及样式相关介绍

一.rpx单位 rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有75

短命女/ 2021年09月12日 06:32/ 0 赞/ 489 阅读