最稳妥解法是用display:flex或grid搭配弹性轨道与精准断点：flex设左侧240px固定、右侧flex:1自适应；grid用grid-template-columns:240px minmax(600px,1fr)并配gap，辅以@media(min-width:840px)和(max-height:720px)应对缩放与低分屏。
笔记本屏幕分辨率差异大（1366×768、1920×1080、2560×1440 甚至 2880×1620），双栏布局用固定像素或简单百分比极易错位、溢出或留白过多。最稳妥的解法是：用 display: flex 或 display: grid 搭配弹性轨道 + 精准断点，而非依赖设备型号。
flex 实现双栏并控制折叠临界点
现代笔记本在 1366px 宽度下常卡在“刚好撑不满又不够分两栏”的尴尬区，flex 能靠内容流自然响应：
- 主容器设
display: flex，左侧栏用flex: 0 0 240px（固定宽、不缩放、不增长） - 右侧主内容区用
flex: 1，吃掉所有剩余空间，不受 padding/margin 挤压影响 - 关键断点别写
@media (min-width: 1024px)—— 改用@media (min-width: 840px)，因为多数笔记本在 840px 视口宽度时，240px 左栏 + 20px 间距 + 至少 560px 内容区才不挤 - 小屏（如 1366×768 的低分屏）若开启系统缩放（125%），实际 CSS 像素更窄，需加
@media (max-height: 720px)单独调padding和font-size，防文字顶到顶部状态栏
grid-template-columns 适配高分屏与缩放混合场景
高分屏（如 2560×1440）+ Windows 缩放 150% 时，px 值会失真，grid 的弹性轨道更可靠：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 用
grid-template-columns: 240px minmax(600px, 1fr))：左侧固定，右侧最小 600px，超出则按比例拉伸 - 避免写死
1fr 1fr—— 它在高DPI下可能让两栏总宽超视口，尤其当有边框/阴影时；minmax()提供安全下限 -
gap: 20px替代 margin，防止网格轨道计算被干扰；调试时临时加outline: 1px solid red可看清真实占位 - 若需兼容 IE11，别用
grid做主布局，回退到flex并补flex-basis: 0防止 flex:1 失效
为什么不能用 float 或 width: 50%
这些写法在笔记本多场景下会立刻翻车：
立即学习“前端免费学习笔记（深入）”；
-
float: left导致父容器高度塌陷，且在 Chrome 120+ 中，开启“开发者工具 → Rendering → Emulate DPR”时，浮动元素易错位 -
width: 50%不处理内边距和边框，240px 左栏 + 50% 右栏 = 总宽 > 100%，触发水平滚动条（尤其在 1366×768 屏上明显） - 媒体查询只按
min-width切换，忽略orientation: landscape—— iPad Pro 连接笔记本模式时横屏，但宽度仍为 1024px，仅靠宽度断点会漏判 - 未设
viewport或设错user-scalable=no，Windows 笔记本“显示设置→缩放与布局”调成 125% 后，页面整体模糊、按钮错位
真正难的不是写两行 CSS，而是把“笔记本用户可能同时开着缩放、外接显示器、竖屏窗口、触控键盘”这些现实变量，提前塞进 minmax()、clamp() 和带 max-height 的媒体查询里——漏掉任意一个，就可能在某个用户的 ThinkPad 上变成白屏或横向滚动条。
