在带有reactjs的移动设备上使用时，如何隐藏我网站的NavBar？

Question

我正在用reactjs建立一个网站，我希望实现类似Instagram的东西。因此，当用户在PC中访问该网站时，他们应该看到导航栏，如果用户在Thier手机上访问它，那么他们应该看到底部标签导航并且应该隐藏导航栏。我还附上了桌面和移动UI的设计照片，这样你们就可以有更好的想法了。另外，我没有使用任何UI库，只是简单的reactjs.

Answer 1

我建议你使用CSS的媒体查询，而不是采取任何其他方式。它会让你的生活变得轻松。您只需要指示要隐藏的代码部分。假设您的导航栏的类只是如下所示放在媒体查询中，并将引导程序的CDN放入您的页面。即

 @media query("Size for what you want to hide navbar)(i.e. 480px or 320px)
          .nav {
               visibility; hidden;
           }

Answer 2

最简单的解决方案是拥有两个版本的导航栏。

导航和导航移动。

您可以使用css媒体查询按照最小/最大屏幕大小隐藏/显示它们，这是最常见的做法之一