我的导航栏响应有问题。我知道我需要使用媒体查询，但我是一个初学者，我真的不知道如何将其作为列表来实现。没有Javascript有可能做到这一点吗？现在代码看起来是这样的，一个简单的列表：
<div id="nav">
<ul>
<li><a class="active" href="index.html"><b>HOME</b></a></li>
<li><a href="works.html">WORKS</a></li>
<li><a href="about.html">ABOUT</a></li>
</ul>
</div>
如果要更改不同视口的某些属性，则只需要媒体查询。查看下面的片段以获得简单的解决方案。
<html>
<head>
<style>
body {
padding: 0;
margin: 0;
}
.navbar {
display: flex;
background-color: #FF5C5C;
font-family: sans-serif;
}
ul {
display: flex;
flex-direction: row;
list-style: none;
}
ul>li>a {
padding: 0 12px;
color: white;
font-size: 12px;
}
@media screen and (max-width: 992px) {
ul>li>a {
font-size: 16px;
padding: 0 6px;
}
.navbar {
background-color: #2689B9;
background: linear-gradient(to right, #40B6C0 40%, #2689B9 80%);
}
}
</style>
</head>
<body>
<div class="navbar">
<ul>
<li><a class="active" href="index.html"><b>HOME</b></a></li>
<li><a href="works.html">WORKS</a></li>
<li><a href="about.html">ABOUT</a></li>
</ul>
</div>
</body>
</html>