uni-app中的rpx

Tips:

• uni-app支持的通用css单位包括px,rpx
• px即屏幕像素
• rpx 即响应式 px，是一种根据屏幕宽度自适应的动态单位。
• rpx 以 750 宽的屏幕为基准，750rpx 恰好为屏幕宽度 (即 375rpx) 为屏幕一半的宽度);当屏幕变宽时，rpx 实际显示效果也会等比例放大

rpx和px的区分和转换：

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

设计稿 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 语句导入外联样式表
  @import url("./test.css");
• 支持基本的常用选择器 class,id,element 等
• 不能使用*选择器
• page 相当于 body 节点
• 定义在 App.vue 中的样式为全局样式；定义在 pages 目录下的为局部样式，同时会覆盖样式相同的全局样式
• 在使用字体图标时：
  1.当字体文件小于 40kb 时，会自动转换为 base64 格式
  2.当字体文件大于等于 40lb 时， 需要开发者自行转换，否则将不生效
  3.字体文件的引用路径推荐使用以~@开头的绝对路径，如下：

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

@font-face {
	font-family: test-icon;
	src: url('~@/static/iconfont.ttf');
}

使用scss编译工具

1. 安装scss插件
2. 使用scss编译工具
   <style lang="scss">
3. 在uni.scss中定义全局样式：

• uni.scss是uni-app内置的常用样式变量
• uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
• 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
• 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
• 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件