头图自适应需四步：加viewport标签确保设备宽度识别；容器设width:100%+max-width防拉伸/留白；fixed横幅时body加同步padding-top；背景图用background-size:cover+min-height保障填充与可读性。

头图（banner）要真正自适应宽度，光设 width: 100% 不够——必须配合视口控制、盒模型约束和响应式断点，否则在小屏上会拉伸变形、在大屏上留白或溢出。

必须加 viewport meta 标签

没有这行，所有“自适应”都是假的：浏览器默认按桌面宽度渲染，头图再宽也缩成一团。直接在 里写死：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

别用 minimum-scale 或 user-scalable=no ——它们会锁死缩放，导致可访问性失败；只保留最核心的两项即可。iOS Safari 和 Chrome for Android 都依赖这个声明来正确计算 100vw 和百分比。

头图容器要用 max-width + width:100%

单纯 width: 100% 在大屏下会让图片无限拉伸模糊；单纯 max-width 又可能在小屏下不铺满。正确组合是：

• width: 100%：确保小屏下撑满
• max-width: 1440px（或你设计稿最大宽度）：防止大屏过宽失真
• height: auto：保持原始宽高比，避免压缩变形
• 外层
  加 overflow: hidden：裁掉超出部分（尤其背景图场景）

  示例 CSS：

  .hero-banner {<br>  width: 100%;<br>  max-width: 1440px;<br>  height: auto;<br>  margin: 0 auto;<br>}

  顶部横幅（fixed 悬浮）必须同步处理 body padding

  用 position: fixed 挂在顶部很常见，但后果严重：横幅脱离文档流，正文直接从 top: 0 开始画，被盖住。

  

  DeepBI DHTML 页面生成器

  生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

  下载

  • 横幅本身必须设：top: 0、left: 0、width: 100%、z-index: 1000
  • 必须加 padding-top，值等于横幅高度（如 padding-top: 60px）
  • 如果横幅高度响应式变化（比如移动端缩为 44px），body 的 padding-top 也要用 @media 同步改

  漏掉 body 的 padding-top，是上线后第一通用户投诉的来源。

  背景图头图优先用 background-size: cover

  如果是通过 background-image 实现的头图，别用 width: 100% 控制图片本身——它对背景图无效。关键属性是：

  • background-size: cover：等比缩放并裁剪，始终填满容器
  • background-position: center center：保证视觉焦点居中
  • background-repeat: no-repeat：防重复平铺

  注意：不要给背景图容器设固定 height，改用 min-height（如 min-height: 50vh），否则在超窄屏上会压扁文字。

  最常被忽略的其实是横幅与正文之间的垂直节奏——哪怕尺寸全对了，padding-top 值没跟设备高度联动，或者 background-size 选错模式，用户第一眼看到的仍是割裂感。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！