Question

因此，我正在尝试为网站构建一个响应式导航栏，在台式机上它可以很好地工作，但是在移动设备上，我却很少处理溢出问题：隐藏；实际上将使溢出消失。

当我最初开始研究此问题时，我发现了几个论坛，它们说有时您需要分配“ overflow：hidden;”。到html的特定部分，所以我尝试了一下，但是没有用。我的溢出仍然在移动设备上完全公开。

.mobile{
      display: none;
      cursor: pointer;
      overflow-x: hidden
  }

  .mobile div{
    width: 25px;
    height: 2px;
    background-color: #2d3436;
    margin: 5px;
    transition: all 0.3s ease;
  }

  @media screen and(max-width:1024px){
      .main-nav{
          width: 60%;
      }
  }

  @media screen and (max-width:786px){
      body{
          overflow: hidden;
      }
      .main-nav{
          position: absolute;
          right: 0px;
          height: 92vh;
          top: 8vh; 
          background-color: white;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 100%;
          transform: translateX(100%);
          transition: transform 0.5s ease-in;
        }
        .main-nav li {
            opacity: 0;
        }
        .mobile{
            display: block;
        }
    }

据我所知（授予的金额不多），这应该是一个响应式导航栏，在移动设备上没有溢出，如果您希望实际运行它，我也有指向测试网站的链接。我可能只是想念一些小东西，但是我被击败了，我已经研究了好几个小时。任何帮助表示赞赏！

Answer 1

尝试将其添加到HTML的head标签中

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

我的响应式导航栏在移动设备上不响应（溢出问题？）

1 个答案: