导航栏不同的屏幕尺寸

Question

我希望导航栏在台式机上为水平，而在移动设备上为垂直。 但这对我的代码不起作用。在台式机和移动设备上它是水平的。

我的代码有什么问题？

<ul class="topnav">
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
</ul>

。

ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  display: flex;
  justify-content: space-around;
}

ul.topnav li {float: left;}

ul.topnav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

@media screen and (max-width: 600px) {
  display: none;
  ul.topnav li.right, 
  ul.topnav li {float: none;}
}

Answer 1

使用此媒体作为示例

@media screen and (max-width: 600px) {
  ul.topnav {
    flex-flow: column;
  }
}