【问题标题】: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}
      

      谢谢

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2021-05-07
        • 2012-12-28
        • 2020-11-16
        • 2012-01-27
        • 1970-01-01
        • 2016-07-30
        相关资源
        最近更新 更多