1、二开为什么要使用基本容器组件
在做CRMEB 多商户系统（PHP）移动端二开的时候，最消磨耐心的往往不是业务逻辑，而是那些琐碎却必须处理的 UI 适配问题，例如全面屏手机顶部的“刘海”和“灵动岛”， 底部安全区域导致按钮无法点击，不同机型千奇百怪的状态栏高度，以及微信小程序右上角雷打不动的“胶囊按钮”。
为了避免在每个页面重复编写枯燥的适配代码，我们封装了 BaseContainer 组件。它统一了页面的基础样式（如字体和最小高度），更关键的是，它自动侦测并计算了当前环境下的所有安全尺寸，并以 CSS 变量的形式注入到页面中，在实际开发时，请默认使用 作为根节点，如此一来可以直接用 CSS 变量来获取所有的安全尺寸。

2、它是如何工作的
该组件通过内部混合的 mixins/device-env.js ，在页面初始化时执行了以下工作：
A: 环境嗅探，别当前运行环境（H5、微信小程序、Android、iOS）。
B：尺寸计算：获取系统状态栏高度、底部安全区高度，以及小程序特有的胶囊按钮坐标。
C: 变量注入：将上述数据转换为 CSS 变量，挂载到组件根节点的 style 属性上，所有的子组件都可以直接引用 CSS 变量。

3、可以使用哪些变量：
变量名 含义 应用场景
–status-bar-height 状态栏高度 避开状态栏区域
–safe-area-inset-bottom 底部安全区域高度 确保不被设备底部的“小黑条”遮挡
–menu-btn-width 小程序胶囊相关尺寸 用于制作和胶囊一致的按钮和搜索框
–menu-btn-top 小程序胶囊相关坐标 用于将自定义UI和胶囊对齐
–view-color 主题色 使新组件和全局风格保持一致
–nav-bar-height 导航栏高度 可用于项目计算容器高度

4、如何在二开中使用这个容器组件
假设我们需要开发一个带有沉浸式导航的页面。如果不使用 BaseContainer，你需要处理极其复杂的环境判断。但现在，一切变得非常简单，以下面代码为例：

⬅️ 会员中心 在上述代码中，无论什么机型，custom-header高度永远等于：状态栏高度 + 导航内容默认高度，paddingTop 使得导航栏恰好避开了安全区域，使得 UI 内容不会错位，省去了费心费力的适配。 再看另外一个例子： .fixed-footer { Position: fixed;bottom: 0; padding-bottom: calc(var(--safe-area-inset-bottom) + 20rpx); } 在很多页面中，页面底部常驻的“立即购买”或“提交订单”按钮非常常见。为了防止按钮紧贴屏幕底部而在全面屏手机上难以点击，我们可以按照上述方法进行处理，自动在底部增加一段安全距离。在全面屏手机上，它距离底部的高度是安全区域 + 20rpx，在普通手机上，它距离底部的高度是 20rpx。在保持风格统一的前提下，还大大减少了误触的风险。

5、结语
BaseContainer 组件虽然看起来简单，但它是整个系统适配方案的核心。它通过自动获取设备信息并转换成 CSS 变量，让你可以轻松实现跨平台适配，完全不用关心具体是什么设备、状态栏多高、有没有安全区域这些问题
就像盖房子需要打地基一样，BaseContainer 就是我们页面的地基。它并不复杂，但它屏蔽了移动端最令人头疼的碎片化适配问题。在进行二次开发时，养成使用它的习惯，能让你的代码更加整洁、稳健。