html - CSS 导航栏在移动设备上运行缓慢

Question

所以我遇到了一个奇怪的错误，代码在我的 PC 浏览器上运行很快，即使在调整大小时也是如此，但是 navbar 在移动设备上下降时非常慢。 以下是代码:

        function response() {
          var x = document.getElementById("nav");
          if (x.className === "navbar") {
              x.className += " responsive";
          } else {
              x.className = "navbar";
          }
        }

.navbar {
      font-family:'lemon';
      z-index:9999;
      height:5vw;
      min-height:40px;
      width:100vw;
      background-color:#111010;
      position: absolute;
    }
    .navbar a {
      display:block;
      float:right;
      color:#c2c0c0;
      font-size:1.1vw;
      transition:text-shadow 0.3s;
      padding-right:30px;
      line-height: 5vw;
      height:100%;
    }
    .navbar a:nth-of-type(2) {
      margin-right:60px;
    }
    .navbar a:not(:first-child) {
        display: none;
            font-size: 15px;
            height:0px;
            transition: height 0.5s;
      }
      .navbar a.icon {
        float: right;
        display: block;
            font-size: 15px;
      }
      .navbar.responsive {
        position: relative;
      }
      .navbar.responsive a {
        clear:both;
        float: none;
        display: block;
        text-align: right;
        background-color:#111010;
        height:60px;
      }
      .navbar a:nth-of-type(2) {
        border:none;
        margin-right:0;
      }
      .navbar .button {
        border:none;
        padding:0;
      }

    <div class="navbar" id="nav">
      <div class="banner">
        <div class="banner-body">
          <img src="Images/Logo - White.svg">
        </div>
        <div class= "banner-tail"></div>
        <div class= "banner-tail"></div>
      </div>

        <a onclick="response()" class="icon" id="menubtn"> <span> &#9776;      </span> </a>

                <a href="#"><span class="button">CONTACT</span></a>
                        <a href="Images/resume - 2.pdf"> <span>RESUME<span> </a>
        <a href="#projects"> <span> PROJECTS</span> </a>
    </div>

我想知道是否有人可以告诉我是什么导致我的手机出现延迟？

Answer 1

导航栏使用固定位置而不是绝对位置，这样会更快。

然后使用 css 中的媒体查询来控制页面的响应速度，see the following link for more details

最后，当在桌面上调整大小时或从移动设备访问时，您必须删除脚本和页面会更快。