直播平台源代码，uniapp中样式的学习及如何使用scss和字体图标

直播平台源代码，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 sass-loader@10.1.1 -D

 

安装10.1.1版本的sass-loader

 

再安装5.0.0版本的node-sass

 

npm i node-sass@5.0.0 -D

 

node-sass需要装Python，Python v3.10.1会报错,控制台执行:

 

npm install --global --production windows-build-tools

 

以上就是 直播平台源代码，uniapp中样式的学习及如何使用scss和字体图标，更多内容欢迎关注之后的文章