css预处理器

   uni-app 支持less、sass、scss、stylus等预处理器。

尺寸单位

   在uni-app官方有更详细的介绍: https://uniapp.dcloud.net.cn/tutorial/syntax-css.html

   uni-app 支持的通用 css 单位包括 px、rpx

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

   在我们实际项目中,我们一般以750px为设计稿尺寸宽度, 如果设计稿提供的不是750px宽设计稿, 我们可以改相对缩放成750, 然后我们得到的尺寸就是xxrpx, 比如一个按钮的尺寸在750px的设计稿中是200px, 我们就可以直接改成200rxp了

全局样式

   在/App.vue style里可以编写全局的样式; 但是一直在App.vue写样式,也很乱,我们可以创建一个common目录,然后在style导入;

   还有/uni.scss里也有很多uni-app定义好的scss变量, 我们可以直接使用; uni.scss的修改要重启项目

样式导入

/App.vue

<style>
    @import "../../common/css/uni.css";
    @import "../../common/scss/uni.scss";

    .uni-card {
        box-shadow: none;
    }
</style>

底部安全区域

   css env(safe-area-inset-bottom)