uni-app中的样式

逃离我推掉我的手 2021-07-25 00:05 414阅读 0赞

# 一 点睛 #

*  rpx即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx实际显示效果会等比放大。
 *  使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用；表示语句结束。
 *  支持基本常用的选择器class、id、element等。
 *  在uni-app中不能使用\*选择器。
 *  page相对于body节点。
 *  定义在App.vue中的样式为全局样式，作用于每一个页面，在pages目录下的vue文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖App.vue中相同的选择器。

# 二 新建 uni-style.vue #

<template>
        <view>
            <view>
                样式学习
            </view>
            <view class="box1">
                测试文字
            </view>
        </view>
    </template>
    
    <script>
    </script>
    
    <style>
        /* @import 导入外部css */
        @import url("./a.css");
        /* 750rpx是整个的屏宽， 375rpx就是屏宽的一半，当屏幕发生变化，盒子的宽度也会发生变化*/
        .box1 {
            width: 375rpx;
            height: 375rpx;
            background: #0000FF;
            color: white;
            font-size: 30rpx;
        }
    </style>

# 三 新建外部样式文件 a.css #

/* 外部样式 */
    view{
        color: red;
    }

# 四 App.vue 中配置全局样式 #

# 五 效果 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/c7fbd563644942c69bad66e4e07a9dd0.png