推荐用 display: flex 实现右侧固定宽度、左侧自适应布局，父容器设 flex-direction: row，右侧侧栏 flex: 0 0 400px，左侧内容区 flex: 1，避免使用 calc() 引发的宽度计算错误。
右侧固定宽度、左侧自适应怎么写才不塌陷
直接用 float 容易出高度塌陷，flex 和 grid 才是现代解法。关键不是“能不能实现”，而是“改一个参数会不会连锁崩掉”。比如主图区设成 400px，信息区必须能自动吃掉剩余空间，且在小屏下不溢出、不遮挡 SKU 选择器。
推荐用 display: flex，父容器设 flex-direction: row，右侧侧栏加 flex: 0 0 400px（禁止缩放 + 固定宽度），左侧内容区只写 flex: 1。别用 width: calc(100% - 400px)——它在缩放或动态插入内容时会算错，尤其当页面有滚动条时，100% 是视口宽，不是可用宽。
常见错误现象：
-
flex: 1没生效，左侧被挤到下一行：检查父容器是否漏了display: flex或写了flex-wrap: wrap - 右侧侧栏文字换行错乱：给侧栏加
min-width: 0，防止 flex 默认的min-width: auto把内容撑开 - 移动端侧栏盖住主图：媒体查询里把
flex-direction改成column，再重设顺序用order
侧栏收起/展开状态如何纯 CSS 实现
不用 JS 就能做三态（全展开 / 半收起 / 隐藏），核心是用 <input type="checkbox"> 当状态开关，配合 :checked + ~ 选择器驱动样式。这种写法天然防 JS 失效、兼容键盘焦点、读屏器也能识别状态变化。
立即学习“前端免费学习笔记（深入）”；
实操要点：
- 把侧栏包进
<aside></aside>，前面放一个不可见但可聚焦的<input id="sidebar-toggle" type="checkbox"> - 用
label[for="sidebar-toggle"]做触发按钮，加aria-expanded属性同步状态 - 半收起态靠
transform: translateX(-240px)实现，别用left或margin-left，否则动画卡顿 - 所有过渡效果统一用
transition: transform 0.3s ease, width 0.3s ease，避免部分属性没加导致跳变
注意：iOS Safari 对 transform 的硬件加速支持不稳定，必须加 will-change: transform 到侧栏元素上，否则滑动时可能闪白。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
侧栏里 SKU 规格联动价格和库存，为什么 Map 比数组遍历快
因为每次用户点一个颜色、再点一个容量，前端要立刻查出对应 price 和 stock，如果用 find() 在数组里逐个比对 specs 数组，平均要遍历一半数据；而用 Map 把 specs.join('|') 当 key，就是 O(1) 查找。
后端返回的 SKU 数据得是这个结构：
const skuList = [
{ skuId: '1001', price: 5999, stock: 12, specs: ['黑色', '128GB'] },
{ skuId: '1002', price: 6299, stock: 0, specs: ['白色', '256GB'] }
]前端建映射：
const skuMap = new Map();
skuList.forEach(sku => {
skuMap.set(sku.specs.join('|'), sku);
});
// 点击后组合成 key：'黑色|128GB' → 直接 get()容易踩的坑：
- 规格顺序不一致导致 key 不匹配，比如后端传
['128GB', '黑色']，前端却按固定顺序拼 —— 必须约定好排序规则，比如按 spec 名字字母序 - 禁用售罄规格时只加
disabled，但没同步更新aria-disabled="true"，读屏器用户无法感知 - 价格数字没用单独
<span class="price-num"></span>包裹，导致小数位 .99 无法用 CSS 缩小字号
图片放大、滑动、缩放功能为什么不能用 background-image
PhotoSwipe 这类库只认 <img src alt="HTML商品详情页固定侧栏设计教学" > 标签，background-image 是 CSS 层面的，它拿不到原始尺寸、无法监听触摸事件、也不能生成高清预览图。最直接的后果：双指缩放错位、拖拽卡死、点击放大后居中偏移。
必须做到三点：
- 每张主图的
<img alt="HTML商品详情页固定侧栏设计教学" >标签带真实尺寸属性：data-pswp-width="1200"和data-pswp- style="max-width:90%"，不能写死或留空 - 图片父容器加
style="touch-action: manipulation"，否则 iOS 上手指一碰就触发浏览器默认滚动，放大手势失效 - 不要给
<img alt="HTML商品详情页固定侧栏设计教学" >设max-width: 100%，PhotoSwipe 内部会自己按 viewport 适配，外部限制反而导致缩放比例计算错误
移动端真机测试时，重点看三指滑动是否能快速切图、双指缩放是否平滑、松手后是否自动回弹 —— 这些细节没调好，用户第一印象就是“卡”“糊”“不好用”，跟设计稿多漂亮没关系。
