uni-app中理解，区分，使用rpx单位和px单位及样式字体的导入
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编译工具
- 安装scss插件
- 使用scss编译工具
<style lang="scss"> - 在uni.scss中定义全局样式：
- uni.scss是uni-app内置的常用样式变量
- uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
- 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
- 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
- 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件