uni-app中的样式

一 点睛

• 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 中配置全局样式

<script>
    export default {
        onLaunch: function() {
            console.log('App Launch')
        },
        onShow: function() {
            console.log('App Show')
        },
        onHide: function() {
            console.log('App Hide')
        }
    }
</script>

<style>
    /*每个页面公共css，它是全局样式 */
    .box1{
        background: pink;
    }
</style>

五 效果