uni-app中的rpx

Tips:

  • uni-app支持的通用css单位包括px,rpx

  • px即屏幕像素

  • rpx 即响应式 px，是一种根据屏幕宽度自适应的动态单位。

  • rpx 以 750 宽的屏幕为基准，750rpx 恰好为屏幕宽度 (即 375rpx) 为屏幕一半的宽度);当屏幕变宽时，rpx 实际显示效果也会等比例放大

  • rpx和px的区分和转换：

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42



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





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





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





举例说明：





 - 若设计稿宽度为 750px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 uni-app 里面的宽度应该设为：750 *


    100 / 750，结果为：100rpx。


 - 若设计稿宽度为 640px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 uni-app 里面的宽度应该设为：750 *


    100 / 640，结果为：117rpx。


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


    200 / 375，结果为：400rpx。

注意 rpx 是和宽度相关的单位，屏幕越宽，该值实际像素越大。如不想根据屏幕宽度缩放，则应该使用 px 单位。

如果开发者在字体或高度中也使用了 rpx ，那么需注意这样的写法意味着随着屏幕变宽，字体会变大、高度会变大。如果你需要固定高度，则应该使用px

rpx不支持动态横竖屏切换计算，使用rpx建议锁定屏幕方向

设计师可以用 iPhone6 作为视觉稿的标准

导入css样式：

使用 @import 语句导入外联样式表

1
2
3



@import url("./test.css");

支持基本的常用选择器 class,id,element 等

不能使用*选择器

page 相当于 body 节点

定义在 App.vue 中的样式为全局样式；定义在 pages 目录下的为局部样式，同时会覆盖样式相同的全局样式

在使用字体图标时：

1.当字体文件小于 40kb 时，会自动转换为 base64 格式

2.当字体文件大于等于 40lb 时， 需要开发者自行转换，否则将不生效

3.字体文件的引用路径推荐使用以~@开头的绝对路径，如下：

注意：字体文件位于 static/fonts 下的 iconfont.css

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12



@font-face {


	font-family: test-icon;


	src: url('~@/static/iconfont.ttf');


}

使用scss编译工具

安装scss插件

使用scss编译工具

1
2
3



<style lang="scss">

在uni.scss中定义全局样式：

uni.scss是uni-app内置的常用样式变量

uni-app 官方扩展插件及插件市场 https://ext.dcloud.net.cn 上很多三方插件均使用了这些样式变量

如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App

如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能

如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件