没有 Javascript 的响应式导航栏，仅使用 HTML 和 CSS答案

【问题标题】：Responsive navigation bar without Javascript, using only HTML and CSS没有 Javascript 的响应式导航栏，仅使用 HTML 和 CSS
【发布时间】：2021-12-30 06:18:26
【问题描述】：

让我的导航栏响应时遇到了问题。我知道我需要使用媒体查询，但我是一个初学者，我真的不知道如何将它作为一个列表来实现。没有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>

【问题讨论】：

欢迎来到 SO，请提供您已经制作的 CSS 以及您想要做什么？

标签： html css navigation media-queries responsive

【解决方案1】：

如果您想更改不同视口的某些属性，您只需要媒体查询。查看下面的 sn-p 以获得简单的解决方案。

    <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>

【讨论】：

谢谢，这行得通。唯一的问题是导航栏被放置在中心，同时通过 Chrome 上的响应式设计模式查看。我怎样才能把它放在左边？
嗯。我没有得到那个结果。它停靠在我的左侧。也许您的页面没有设置为移动视口。尝试在你的标签中添加这个 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
我设法解决了它，不知何故有一个隐藏元素阻止了它。但是，谢谢您的回答，它挽救了我的一天！ :)