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

Question

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

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

谢谢!

Answer 1

下面的示例在 770 像素、576 像素和 500 像素处中断。每次中断都会更改导航背景颜色，但 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>