Uni-app笔记 uni-app中的样式 引入css文件 字体图标 安装sass 全局样式

1、uni-app中的样式

Uni-app的样式与传统css有所不同

Uni-app中的主要单位是upx或者写为rpx   随着屏幕大小变化 rpx也会随之拉伸

uni-app会把整个屏幕分为750份不变  每一份为1rpx

uni-app中不能使用*选择器 page相当于body

占用屏幕一半  也就是375rpx  字体大小为40rpx
 

 2、引入样式文件

通过@import方式引入

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

3、字体图标

下载好字体图标文件后新建一个fonts文件夹放入static中

使用字体图标时需要注意

字体文件小于40kb 会自动转化为base64格式

大于等于40kb 你需要自己转换 否则无效

字体文件引入建议使用@开头 比如 拿到的字体文件可能也需要进入改~@

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

4、安装sass

如果你在lang输入 lang="sass"

运行后会报错  弹出地址 需要你去下载sass插件

下载完成后即可使用

5、全局样式

你可以在uni.scss中定义变量 可以在其他文件中直接引用 方便页面开发