响应式悬浮按钮实现方法

实操建议：

• 必须用语义化 ，或给非 button 元素加 tabindex="0"
• 用 @media (hover: hover) and (pointer: fine) 包裹 hover 样式，避免移动端误加载
• 为触控设备单独定义 :active 和 :focus-visible，例如：

  @media (hover: none) { .feedback-btn:active { transform: scale(0.96); } }

媒体查询里该按宽度还是交互方式切响应点？

只按 max-width 切断点容易翻车：比如折叠屏展开后宽度 >768px，但仍是触控优先；又或者 iPad 横屏 1024px 宽度，却有鼠标可用。应该以交互能力为第一维度。

实操建议：

• 优先用 @media (hover: hover) and (pointer: fine) 区分鼠标/触控环境
• 再叠加宽度约束，例如：

  @media (hover: hover) and (pointer: fine) and (max-width: 768px) { .feedback-btn { right: 12px; bottom: 12px; } }

• 避免用固定像素断点如 768px，改用相对单位或容器查询（@container）更健壮，但需检查浏览器支持（Chrome 105+ / Safari 16.4+）

如何让按钮在键盘弹出时不被遮住？

Android 和 iOS 键盘弹出会压缩视口高度，fixed 元素仍锚定在原 bottom 值，结果被盖住。这不是 CSS 能单独解决的问题，必须结合 JS 检测。

实操建议：

• 监听 resize 事件，对比 window.innerHeight 与上次记录值，下降超过 15% 视为键盘弹出
• 键盘弹出时临时改用 position: absolute 并绑定到一个滚动容器底部（如 main），而非视口
• 用 visualViewport API 更精准：监听 visualViewport.height 变化，比 resize 更及时

真正难的是边界情况：比如微信内置浏览器不触发 resize，需要 fallback 到 focusin + 定时检测 document.activeElement 是否为输入类元素。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《响应式悬浮按钮实现方法》文章吧，也可关注golang学习网公众号了解相关技术文章。