粘性导航栏 - 仅在移动设备上展示

Question

我想让按钮只在移动设备上粘贴 - 在演示link

上就像这样

您必须将浏览器的大小调整为移动维度才能看到此内容。基本上这是预期的 - 在登录页面上，您可以看到按钮位于横幅下方，当向下滚动时，它将在顶部粘贴： stickynav

我希望手机上有这个粘性，但现在它正在桌面上发生。您是否有人可以建议是否有任何影响或如何实现仅在移动设备上粘贴的按钮？

桌面版本对按钮的放置方式是否会有任何影响？

Answer 1

假设你有一个按钮

<button class="for-mobile"></button

您需要先隐藏此按钮

.for-mobile {display:none;}

并在调整屏幕大小时显示

@media only screen and (max-width: 1020px)
.for-mobile {
    display: block !important;
}

更改最大宽度以在应用此样式时进行调整

Answer 2

您应该使用css @media 查询。 看看here

Answer 3

如果你看到网站的源代码，你可以很容易地理解它在标题div中使用了一个类.non-mobile

<div class="row t-most-header non-mobile">

并给出 CSS ：

   @media only screen and (max-width: 1020px)
   {
     .non-mobile
    {
       display:none !important
    }
  }

详细了解媒体查询here