.body {
padding-top: calc(env(safe-area-inset-top) + var(--navigation-bar-height));
padding-right: env(safe-area-inset-right);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);
}
上面的安全区设置在模拟器上不生效(真机可以),顶部填充高度总是少了状态栏的高度,导致部分顶部内容被导航条挡住了,想通过 postcss 插件 postcss-env-function 来给模拟器设置安全区环境变量的默认值,但不生效。
具体安装配置过程如下:
1、在 miniprogramRoot(./miniprogram)下执行以下命令来安装 postcss-env-function 插件
npm install postcss-env-function --save-dev
{
"name": "miniprogram",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": "",
"dependencies": {
"@miniprogram-component-plus/tabs": "^1.0.0",
"miniprogram-computed": "^6.0.2",
"mobx-miniprogram": "^6.12.3",
"mobx-miniprogram-bindings": "^5.0.0",
"weui-miniprogram": "^1.5.6"
},
"devDependencies": {
"postcss-env-function": "^7.0.0"
}
}
2、在项目根目录下创建 postcss.config.js 文件,并配置安全区环境变量
module.exports = {
plugins: {
"postcss-env-function": {
importFrom: {
environmentVariables: {
"safe-area-inset-top": "20px",
},
},
},
},
};
3、打开开发者工具“本地设置”里的“上传代码时样式自动补全”
是不是调试的时候不会经过 postcss 处理阶段?