Uniapp中的css样式

样式

-rpx

代码

样式大小将会随动
似乎750为一屏
1125为竖一屏，不知道这个是个怎么基准。反正变换分辨率的时候回跟着调整，或许是系数吧，对文字同样有效

<template>
	<view>
		<view>
			样式
		</view>
		<view class="box1">
			文字样式
		</view>
	</view>
</template>
<style>
.box1{
	width: 750rpx;
	height: 1125rpx;
	background: #aaaaff;
	font-size: 30rpx;  // 对文字有效
}
</style>

-@improt

可以通过他导入外部css样式

比如我们创建一个样式在外面，然后在style中…进行导入。。由于是在最外层，所以整个页面有效

<style>
	@import url("./back.css");
.box1{
	width: 750rpx;
	height: 1125rpx;
	background: #aaaaff;
	font-size: 30rpx;
}
</style>

page相当于body节点

并且定义在App.vue中的样式为全局样式，作用于每一个页面，
在pages目录下的vue文件中定义的样式为局部样式，最近原则，优先级最高

-字体图标

示例：
首先先把字体图标文件加入项目static文件夹下的fonts目录[自定义]
然后引入字体的css文件[推荐在vue.app做全局引入]

一般css文件中引入字体的路径都会报错。我们修正一下
修改前：

修改后：

使用：

-scss 的使用

一般情况是会报错没有安装插件我们安装他

使用测试

准备一个text

然后在父级box的css中我们定义

就可以直接使用，并不用额外的引入；

补充

这个文件是uniapp中的全局变量
内容如下

里面的都可以直接使用
我们在别的地方可以直接使用这里的变量，而无需导入；
类似全局变量；
比如我们存一个背景色=红，其他地方直接使用背景色这个变量就可以了。而不用担心颜色不一致