当屏幕尺寸发生变化时，如何调整菜单栏的大小？答案

【问题标题】：How do I resize my menu bar when the screen size changes?当屏幕尺寸发生变化时，如何调整菜单栏的大小？
【发布时间】：2020-06-04 17:57:12
【问题描述】：

我想在屏幕调整大小时调整顶部菜单栏的大小。我已经尝试过通常的@media screen 方法，但它似乎不起作用。请帮我找到解决办法？

这是 HTML：

<p id='nav-menu' style='text-align:center; '>
  <a href="#">Food & Drink</a>
  <a href="#">Arts</a>
  <a href="#">Culture</a>
  <a href="#">Active</a>
  <a href="#">Areas</a>
  <a href="#">About</a>
</p>

谢谢

【问题讨论】：

能否将您的 CSS 与问题一起添加，因为那里可能有问题。

标签： html css resize

【解决方案1】：

您可以通过@media 轻松完成

确保您在标题中有此代码

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

@media screen and (max-width: 600px) {
    /* Your code is here*/
}

【讨论】：

【解决方案2】：

如果您正确使用媒体查询，它应该可以工作。假设您希望链接位于一列而不是一行，您可以这样做：

/* Feel free to change the width */
@media (max-width: 600px) {
    #nav-menu {
        display: flex;
        flex-direction: column;
    }
}

【讨论】：

【解决方案3】：

感谢您的回复。我尝试了 flex 并且它有效，但我不想将它们排列在一个列中。我尝试过的其他功能似乎不起作用（即应用固定宽度）。

我用来格式化它们的 CSS 如下 - 其中是否有干扰 @media 功能的东西？

#nav-menu {font-size:16px; line-height:32px; 
                width:720px; height:32px; margin:0 auto; padding:0;}

#nav-menu a {display:block; text-decoration: none; color:#000000; width:100px; height:32px; margin:0 0px 0 10px; float:left; border: 3px solid #808080}

谢谢

【讨论】：