样式
-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中的全局变量
内容如下
里面的都可以直接使用
我们在别的地方可以直接使用这里的变量,而无需导入;
类似全局变量
;
比如我们存一个背景色=红,其他地方直接使用背景色这个变量就可以了。而不用担心颜色不一致