直播平台源代码，uniapp中样式的学习及如何使用scss和字体图标
uni-app中的样式
rpx即响应式px,一种根据屏幕自适应动态单位。以750宽的屏幕为基准,750rpx恰好为屏幕宽度。屏幕变宽,rpx实际显示效果会比较大。
iphone XR(414*896)它的宽高为(414*414)
所以750rpx就等于它一整屏幕的宽度
<template>
<div>
<view>
<text>样式的学习</text>
</view>
<view class="box1"></view>
</div>
</template>
<script>
export default{
}
</script>
<style scoped>
.box1{
width: 750rpx;
height: 750rpx;
background: linear-gradient(#CAE1FF,#EE0000,#98FB98,#4EEE94,#87CEFF);
}
</style>
使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束
外部css样式
view{
color: red;
}
.vue文件里的:
<template>
<div>
<view>
<text>样式的学习</text>
</view>
<view class="box1"></view>
</div>
</template>
<script>
export default{
}
</script>
<style scoped>
@import url("./a.css");
.box1{
width: 750rpx;
height: 750rpx;
background: linear-gradient(#CAE1FF,#EE0000,#98FB98,#4EEE94,#87CEFF);
}
</style>
支持基本常用的选择器class、id、element等
uni-app中不能使用*选择器。
page相当于body节点
定义在App.vue中的样式为全局样式，作用于每一个页面。在pages目录下的vue文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖App.vue中相同的选择器
ni-app支持使用字体图标，使用方式与普通web项目相同，需要注意以下几点:
字体文件小于40kb,uni-app会自动转化为base64格式;
字体文件大于等于40kb,需要开发者自己转换,否则使用将不生效;
字体文件的引用路径推荐使用以~@开头的绝对路径。
@font-face{
font-family: test1-icon;
src: url('~@/static/iconfont.ttf')
}
如何使用scss或less
在uni.scss里面启用的是全局的scss
VsCode里面npm i sass-loader是不行的，你可以采取以下解决办法:
npm i [email protected] -D
安装10.1.1版本的sass-loader
再安装5.0.0版本的node-sass
npm i [email protected] -D
node-sass需要装Python，Python v3.10.1会报错,控制台执行:
npm install --global --production windows-build-tools
以上就是 直播平台源代码，uniapp中样式的学习及如何使用scss和字体图标，更多内容欢迎关注之后的文章
标签：scss,uniapp,sass,样式,750rpx,字体,源代码,图标 From： https://www.cnblogs.com/yunbaomengnan/p/16665260.html