基于屏幕大小的水平导航栏和垂直导航栏

Question

我正在为一个朋友重新设计一个网页，并且试图消除大屏幕上的一堆空白。我这样做的一种方法是采用静态导航栏之一，使其在较大的屏幕上垂直，然后在较小的屏幕上翻转为水平。我不确定执行此操作需要哪种代码。可以仅使用CSS完成此操作，还是必须使用JS / C＃完成此操作？

我已经开发了每个版本的导航栏，与每个版本的显示时间有关。查看随附的照片。

Answer 1

我强烈建议的一种解决方案是flexbox和媒体查询。

See this CSS-tricks article

将flex-direction：行用于水平导航栏，将flex-direction：列用于垂直导航栏。您可以使用媒体查询根据屏幕宽度在列和行的伸缩方向之间切换。您正在寻找的媒体查询代码如下：

.navbar {
  display: flex
}

/* On screens that are 992px or less, set navbar to horizontal */
@media screen and (max-width: 992px) {
  .navbar {
    flex-direction: column;
  }
}

Have a look at more media query examples on w3school