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

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

uni-app中的样式

rpx即响应式px,一种根据屏幕自适应动态单位。以750宽的屏幕为基准,750rpx恰好为屏幕宽度。屏幕变宽,rpx实际显示效果会比较大。

iphone XR(414*896)它的宽高为(414*414)

所以750rpx就等于它一整屏幕的宽度

 

1

<br><template><br>    <div><br>        <view><br>            <text>样式的学习</text><br>        </view><br>        <view class="box1"></view><br>    </div><br></template><br><script><br>    export default{<br>    }<br></script><br><style scoped><br>    .box1{<br>        width: 750rpx;<br>        height: 750rpx;<br>        background: linear-gradient(#CAE1FF,#EE0000,#98FB98,#4EEE94,#87CEFF);<br>    }<br></style>

​使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束

外部css样式

 

1

<br>view{<br>    color: red;<br>}<br>.vue文件里的:<br><template><br>    <div><br>        <view><br>            <text>样式的学习</text><br>        </view><br>        <view class="box1"></view><br>    </div><br></template><br><script><br>    export default{<br>    }<br></script><br><style scoped><br>    @import url("./a.css");<br>    .box1{<br>        width: 750rpx;<br>        height: 750rpx;<br>        background: linear-gradient(#CAE1FF,#EE0000,#98FB98,#4EEE94,#87CEFF);<br>    }<br></style>

支持基本常用的选择器class、id、element等

uni-app中不能使用*选择器。

page相当于body节点

定义在App.vue中的样式为全局样式，作用于每一个页面。在pages目录下的vue文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖App.vue中相同的选择器

ni-app支持使用字体图标，使用方式与普通web项目相同，需要注意以下几点:

字体文件小于40kb,uni-app会自动转化为base64格式;

字体文件大于等于40kb,需要开发者自己转换,否则使用将不生效;

字体文件的引用路径推荐使用以~@开头的绝对路径。

 

1	<br>@font-face{<br>    font-family: test1-icon;<br>    src: url('~@/static/iconfont.ttf')<br>}

如何使用scss或less

在uni.scss里面启用的是全局的scss

VsCode里面npm i sass-loader是不行的，你可以采取以下解决办法:

 

1	<br>npm i sass-loader@10.1.1 -D

 

安装10.1.1版本的sass-loader

 

再安装5.0.0版本的node-sass

 

1	<br>npm i node-sass@5.0.0 -D

 

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

 

1	<br>npm install --global --production windows-build-tools

 

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