详解uni-app中的样式

发布于：2022-04-22 15:56:41  栏目：技术文档

这篇文章主要为大家介绍了uni-app中的样式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助目录

uni-app中的样式
总结 

uni-app中的样式

sass插件需要在官网下载，按提示操作即可
rpx 即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大。
使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束
定义在 App.vue 中的样式为全局样式，作用于每一个页面。在 pages 目录下 的 vue 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 App.vue 中相同的选择器。

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

字体文件小于 40kb，uni-app 会自动将其转化为 base64 格式；
字体文件大于等于 40kb， 需开发者自己转换，否则使用将不生效；
字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。

<template>
    <view>
        <view>
            样式学习
        </view>
        <view class="box1">
            测试文字
            <text>123</text>
        </view>
        <view class="iconfont icon-shipin">
        </view>
    </view>
</template>
<script>
</script>
<style lang="scss">
    @import url("./a.css");//导入了外部的css文件
    .box1{
        width: 350rpx; //rpx不仅可以给盒子使用还可以给文字使用
        height: 350rpx;
        background: red;
        font-size: 50rpx;
        color: #FFFFFF;
        text{
            color: pink;
        }
    }
</style>

在App.vue里面定义公共的全局样式

<style>
    /*每个页面公共css */
    //全局样式,会被局部样式覆盖掉
    @import url("./static/fonts/iconfont.css");
    .box1{
        background: pink;
    }
</style>

相关推荐