公告栏需用padding-top推下主体、localstorage持久化关闭状态、flex布局防按钮错位、transform启用gpu加速防ios闪烁。
直接加一个 <div class="notice-bar"> 并配好 CSS，5 分钟内就能让公告栏跑起来；但真要它不遮内容、关了记得、小屏不崩、iOS 不卡，得把 padding、localStorage、flex 和 transform 这四件事串起来做。
<h3>怎么让固定顶部公告不挡住页面主体</h3>
<p>只写 <code>position: fixed; top: 0 是最常见错误——后续内容会从屏幕顶边开始渲染，被横幅盖住。必须主动“推下”内容区域。
- 给
加padding-top，值等于横幅实际高度（比如48px）；用margin-top容易引发文档流塌陷 - 高度不确定时（如多行文本、响应式字号），用 JS 动态读取：
document.body.style.paddingTop = banner.offsetHeight + 'px' - 如果全局用了
box-sizing: border-box，注意 padding 会挤占可用宽度，避免出现双滚动条
关闭后如何真正记住用户选择
刷新后又弹出来，说明没持久化状态。别用 sessionStorage（关标签就丢），也别碰 cookie（没服务端纯属冗余）。
- 关闭按钮点击时，同步写入：
localStorage.setItem('notice_bar_closed', 'true') - 页面加载时立刻检查：
if (localStorage.getItem('notice_bar_closed') === 'true') { banner.style.display = 'none'; } - 不要只隐藏 DOM，更不能只删元素——下次 JS 初始化时还得重新判断、重建、再设样式
小屏下文字换行和按钮错位怎么修
white-space: nowrap 在窄屏上直接溢出，flex 布局又常把关闭按钮压缩到看不见。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 文字容器加
flex: 1; min-width: 0;，再配text-overflow: ellipsis; overflow: hidden; - 关闭按钮加
flex-shrink: 0;，防止被 flex 自动压缩 - 媒体查询里别只调
font-size，同步改height和padding，否则文字贴顶或截断
iOS Safari 滚动时横幅闪烁或重绘延迟
这是 iOS WebKit 的已知行为：fixed 元素在滚动中容易掉帧、闪一下、甚至卡住不动。
- 给横幅根元素加
transform: translateZ(0)或will-change: transform，强制启用 GPU 加速 - 别加
backface-visibility: hidden——它在某些旧版 iOS 上反而触发更多 bug - 这个优化只对 fixed 元素有效；如果横幅是 sticky 或普通定位，加了也没用
最难的不是让它显示出来，而是它什么时候该消失、消失后还记不记得、窄屏下文字会不会把关闭按钮顶飞——这些细节没处理好，用户连“公告”两个字都来不及看清就划走了。
