用 display: grid 实现双栏布局最省心，直接设 grid-template-columns: 30% 70%，无需处理浮动、margin 或 BFC；注意子元素勿再设 width，父容器用 gap 控制间距，响应式需配合媒体查询切换列定义，语义双栏须靠 DOM 结构而非视觉对齐。
用 display: grid 实现双栏布局最省心
直接写 grid-template-columns: 30% 70% 就能分出左右两栏，不用算 margin、不担心浮动塌陷、也不用 hack BFC。现代浏览器（Chrome 57+、Firefox 52+、Safari 10.1+）全支持，连 iOS 10.3 都没问题。
常见错误是给子元素再设 width —— Grid 已经按列宽分配了空间，额外设 width 可能导致内容溢出或换行错乱。
实操建议：
- 父容器加
gap: 2rem控制间距，比手动 padding 更干净 - 左侧栏别加
width或flex，让它纯靠 Grid 列宽控制高度和宽度 - 右侧内容区用
min-height: 200px防止空内容时视觉断裂 - 打印样式里加
@media print { .resume { grid-template-columns: 1fr; } }，避免双栏被截断
小屏切单栏必须用 @media (max-width: 768px)
别信“用 flex-direction: column 就能响应式”这种模糊说法——它只改排列方向，不解决列宽冲突。真正起效的是媒体查询配合列定义切换。
立即学习“前端免费学习笔记（深入）”；
768px 是 iPad 竖屏临界值，但要注意：Surface Duo 展开后 window.innerWidth 可能是 1440px，却实际只渲染左半区 720px。这时候仅靠 max-width 会失效。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
实操建议：
- 用
@media (max-width: 768px), (display-mode: standalone)覆盖 PWA 场景 - 避免写
@media (min-width: 769px)—— 容易漏掉 768.5px 这类设备像素比非整数情况 - 在双屏设备上，可补充 JS 检测：
if ('visualViewport' in window) { ... }动态加 class 替代纯 CSS 方案
display: flex 做双栏时 align-items 必须设为 flex-start
默认 align-items: stretch 会让左右栏强制等高，而简历/翻译界面这类内容天然不均等——左边技能标签可能只有 3 行，右边项目描述有 12 行，结果左侧空白大片，视觉失衡。
很多人试过 height: fit-content，但它在 Flex 容器里不生效；也有人用 min-height 硬撑，反而让小屏堆叠时出现多余空白。
实操建议：
- 显式写
align-items: flex-start，让两栏各自按内容高度伸展 - 左侧栏用
flex: 0 0 30%（不是width: 30%），防止内容超长时被压缩 - 右侧栏用
flex: 1，比flex: 0 0 70%更适应内容变化 - IE11 兼容需加
-ms-flex-positive: 1和-ms-flex-negative: 1
双栏语义不能靠视觉对齐，得靠 DOM 结构
比如做翻译对照界面，如果只是两个并排 <div>，屏幕阅读器无法识别“左边第 3 段对应右边第 3 段”，打印时也可能错位。真正的双栏不是“看起来像两栏”，而是“结构上就是一对一对的”。
<p>错误做法是用 <code>position: absolute 把视频框钉在右上角——它脱离文档流，后续 <h1>new part</h1> 会直接从顶部开始渲染，被遮盖或挤出视口。
实操建议：
- 用
<section class="translation-pair"></section>包裹每组原文/译文，保持 DOM 层级一致 - Grid 布局中，每个
.translation-pair内部用grid-template-columns: 1fr 1fr，而非全局两栏 - 插入翻译结果时，用
element.textContent = response.text，别碰innerHTML—— 防 XSS 也防换行丢失 - 中文输入法场景下，监听
compositionstart和compositionend，避免“你好”还没选词就发请求
