使HTML小部件动态调整大小

我试图使我的HTML小部件在浏览器调整大小时能够响应并调整大小。以下是HTML：

<nav class="navigation">
    <ul class="menu">
        <li class="menu__item">
            <a href="" class="menu__link" target="_blank">
                <span class="menu__title">
                    <span class="menu__first-word" data-hover="Executive">
                        Executive
                    </span>
                    <span class="menu__second-word" data-hover="Summary">
                        Summary
                    </span>
                </span>
            </a>
        </li>

        <li class="menu__item">
            <a " class="menu__link" target="_blank">
                <span class="menu__title">
                    <span class="menu__first-word" data-hover="Display">
                        Display
                    </span>
                    <span class="menu__second-word" data-hover="Summary">
                        Summary
                    </span>
                </span>
            </a>
        </li>

        <li class="menu__item">
            <a href="" class="menu__link" target="_blank">
                <span class="menu__title">
                    <span class="menu__first-word" data-hover="Facebook">
                        Facebook
                    </span>
                    <span class="menu__second-word" data-hover="Summary">
                        Summary
                    </span>
                </span>
            </a>
        </li>

        <li class="menu__item">
            <a href="" class="menu__link" target="_blank">
                <span class="menu__title">
                    <span class="menu__first-word" data-hover="LinkedIn">
                        LinkedIn
                    </span>
                    <span class="menu__second-word" data-hover="Summary">
                        Summary
                    </span>
                </span>
            </a>
        </li>

        <li class="menu__item">
            <a href="" class="menu__link" target="_blank">
                <span class="menu__title">
                    <span class="menu__first-word" data-hover="Search">
                        Search
                    </span>
                    <span class="menu__second-word" data-hover="Summary">
                        Summary
                    </span>
                </span>
            </a>
        </li>
                <li class="menu__item">
            <a href="" class="menu__link" target="_blank">
                <span class="menu__title">
                    <span class="menu__first-word" data-hover="Google">
                        Google
                    </span>
                    <span class="menu__second-word" data-hover="Analytics">
                        Analytics
                    </span>
                </span>
            </a>
        </li>
    </ul>
</nav>

请建议调整此项以使其动态的最佳方法。现在，我已经通过HTML删除了URL引用

如果你有任何问题，请告诉我

---

谢谢，

HTML不是为了响应而设计的，它是用来构造页面的。 CSS被用来“设计”它。 我会添加一个JavaScript脚本来动态调整元素的大小

如果您不习惯JavaScript，不要担心，它非常简单

以下是一些有用的文档：

---

希望有帮助；）

您必须定义媒体查询，删除一些填充和/或更小的字体大小“如果您有任何问题，请告诉我。”-同样。如果你还不能提出一个实际的问题，那么请去阅读。@Cbroe这是一个非常有用的评论。谢谢。谢谢这个@ZyriabDsgn，我会仔细阅读并做出调整@纳库布。不客气，我不是一个web开发人员，所以可能还有其他方法来实现这一点。如果我的帖子给了你答案，请把它标记为“帮助回答”或类似的东西，有相同问题的路过的人会很容易找到你的帖子，并标记为“已解决”。如果您找到了另一种方法，那么将您的问题标记为“已解决”并分享您的解决方案仍然是一个好主意；）

 body {
      display: flex;
      align-items: center;
      height: ;
      background: #FFF;
    }

    a {
      outline: 0;
      text-decoration: none;
    }

    .navigation {
      width: 100%;
      border-bottom: 3px solid #000;
      font-family: 'Pathway Gothic One', sans-serif;
      font-size: 22px;
    }

    .menu {
      display: flex;
      justify-content: center;
      max-width: 1150px;
      margin: 0 auto;
      padding-left: 0;
    }

    .menu__item {
      display: inline-block;
      white-space: nowrap;
    }
    @media screen and (max-width: 480px) {
      .menu__item:nth-child(n + 3) {
        display: none;
      }
      .menu__item:nth-child(2) .menu__link {
        border-right: 0;
      }
    }
    @media screen and (max-width: 768px) {
      .menu__item:nth-child(n + 4) {
        display: none;
      }
      .menu__item:nth-child(3) .menu__link {
        border-right: 0;
      }
    }
    @media screen and (max-width: 992px) {
      .menu__item:nth-child(n + 5) {
        display: none;
      }
      .menu__item:nth-child(4) .menu__link {
        border-right: 0;
      }
    }
    .menu__item:last-child .menu__link {
      border-right: 0;
    }

    .menu__link {
      display: block;
      padding: 6px 30px 3px;
      border-right: 2px dotted #ccd7d7;
    }
    .menu__link:hover .menu__first-word, .menu__link:focus .menu__first-word {
      transform: translate3d(0, -105%, 0);
    }
    .menu__link:hover .menu__second-word, .menu__link:focus .menu__second-word {
      transform: translate3d(0, 105%, 0);
    }
    @media screen and (min-width: 768px) {
      .menu__link {
        padding: 6px 40px 3px;
      }
    }

    .menu__title {
      display: inline-block;
      overflow: hidden;
    }

    .menu__first-word,
    .menu__second-word {
      display: inline-block;
      position: relative;
      transition: transform .3s;
    }
    .menu__first-word::before,
    .menu__second-word::before {
      position: absolute;
      content: attr(data-hover);
    }

    .menu__first-word {
      color: #000000;
    }
    .menu__first-word::before {
      top: 105%;
      color: #000000;
    }

    .menu__second-word {
      color: #F37421;
    }
    .menu__second-word::before {
      bottom: 105%;
      color: #F37421;
    }