4.uni-app中的样式

rpx

rpx是一个根据屏幕尺寸等比例缩放的像素单位，它基于750px屏幕宽度来定的。

当设定值为750rpx，元素将占满整个屏幕。

而当设定只为375px是，元素只占半个屏幕。

width: 375rpx;

height: 375rpx;

引入iconfont

从素材中将iconfont的相关文件都复制到static/fonts文件夹下面

使用～@将iconfont中的所有相对路径改为绝对路径：

～@/static/fonts/...

在App.vue中引入iconfont，让其全局有效：

@import url('./static/fonts/iconfont.css');

在相应的组件中引入iconfont：

<view class="iconfont icon-index-fill" />

引入scss

增加lang标签，工具会自动安装相应插件，也可以通过菜单->工具->插件安装进行手动安装。

<style lang="scss">...</style>

在uni.scss中增加颜色变量：

$global-color: blue;

在组件中引入颜色变量：

<style lang="scss">

.box {

background-color: $global-color;

}

</style>

参考：

13-uni中的样式及如何使用scss和字体图标