如何在桌面和移动设备上为我的网站提供不同的视图浮动操作按钮？

【问题标题】：How can I have different views Floating action button on desktop and Mobile for my website?如何在桌面和移动设备上为我的网站提供不同的视图浮动操作按钮？
【发布时间】：2018-08-23 21:46:22
【问题描述】：

我的网页右侧有一个浮动操作按钮，但是当我在手机上查看它时，它要么完全从页面中消失，要么阻碍了整体视图。理想情况下，我希望它贴在我手机页面的底部。关于如何使用 HTML 和 CSS 做到这一点的任何提示？

【问题讨论】：

标签： html css responsive-design floating-action-button

【解决方案1】：

您应该使用媒体查询以便在更小或更高的分辨率内以不同的方式显示浮动操作按钮。

您还可以分析 JS 中的 window.navigator 对象并在 <body> 上设置适当的类，以便以后在 CSS 中使用它，如果您想在物理设备之间有所不同。

为了了解按钮丢失的原因，我建议您将手机连接到调试工具并查看发生了什么。

使用position: fixed 可能可以实现将按钮固定在底部

【讨论】：