根据媒体屏幕/屏幕宽度缩小导航栏

Question

嗨，我想知道是否可以根据媒体屏幕缩小导航栏。就像可以说的，我希望导航栏仅以特定高度显示在台式机和笔记本电脑上，而我希望它以较小的特定高度显示。或者根据媒体屏幕禁用HTML中的某些元素

任何帮助或评论都会对我有很大帮助！

谢谢！

Answer 1

下面的示例在770px，576px和500px处中断。 每次休息都会改变导航背景的颜色，但500除外，它将删除它。

nav {
  width: 100%;
  height: 100px;
  background-color: coral;
}

@media (max-width: 770px) {
  nav {
    background-color: aquamarine;
  }
}

@media (max-width: 576px) {
  nav {
    background-color: burlywood;
  }
}

@media (max-width: 500px) {
  nav {
    display: none;
  }
}

<nav></nav>