是否可以使用display：none为响应式网站创建多个CSS导航栏？

Question

我有一个完全由CSS制作的导航栏在大屏幕上运行良好，但是太大而不能简单地在移动设备上重排。我的一个想法是简单地创建第二个适合移动设备的导航栏，并将其置于桌面版本的顶部，但使用display：none隐藏它。然后，我可以使用移动断点来显示移动导航栏并隐藏桌面版本。

这是CSS可接受的做法吗？如果没有，是否有另一种方法可以为不同的断点显示完全不同的导航栏？

编辑：为了澄清，我正在使用@media查询断点。

Answer 1

是的，这样做很好。但是，只是为了澄清您应该使用CSS媒体查询告诉浏览器何时切换到不同的导航栏。

Answer 2

是的，通常的做法是使用display：none隐藏或显示某些元素，用于媒体查询的不同断点。

有关媒体查询及其使用方法的详细信息，请访问this site。