如何为我的网站在桌面版和移动版上使用不同的视图浮动操作按钮?

时间:2018-08-23 21:46:23

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

我在网页的右侧有一个浮动操作按钮,但是当我在手机上对其进行检查时,它要么完全消失在页面中,要么阻碍了整体视图。理想情况下,我希望将其保留在移动设备页面的底部。关于如何使用HTML和CSS的任何提示?

1 个答案:

答案 0 :(得分:0)

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

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

为了知道为什么按钮不见了,建议您将手机连接到调试工具,看看发生了什么。

使用position: fixed

可以将您的按钮触到底部