html - 我的网站如何在桌面和移动设备上有不同的 View float 操作按钮?

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

我的网页右侧有一个 float 操作按钮,但当我在手机上查看它时,它要么完全从页面中消失,要么阻碍了整体 View 。理想情况下,我希望它能贴在我手机页面的底部。关于如何使用 HTML 和 CSS 执行此操作的任何提示?

最佳答案

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

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

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

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

关于html - 我的网站如何在桌面和移动设备上有不同的 View float 操作按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51994719/

相关文章:

至少有 N 个 child 的节点的 CSS 选择器?

css - 将缩进 block 引用内的表格缩进删除到整个主体宽度

html - 具有较少行清除的 CSS 样式行

css - 如何使 div 标签中的文本具有响应性?

html - 空白 : pre-line for small cell

javascript - 如何获取答案的结果并对该结果进行计算

javascript - Angular 如何在 html5 模式下保持主题标签

jquery - Bootstrap 下拉菜单在悬停时关闭

ios - 桌面和 iPad 横向混合媒体查询

responsive-design - 如何使用Dart获得以英寸为单位的屏幕实际尺寸?