Question

我相信正在发生的事情是图像越来越萎缩，直到它消失，我想在移动设备上保持相同的尺寸，并且还要平衡到导航/汉堡包的其余部分

<!DOCTYPE html>

<head>
</head>

<body>
  <style>
    /* --- header -- */

    .navbar-header div.logo {
      margin-top: -1%;
      padding-bottom: 0;
    }

    .navbar-header div.logo a.navbar-brand {
      padding: 0;
    }

    .navbar-header div.logo a.navbar-brand img {
      width: 6%;
      padding: 15px;
    }

    navbar-nav .navbar-brand {
      display: flex;
      align-items: center;
    }

    .navbar-nav .navbar-brand>img {
      padding: 7px 14px;
    }
    /****override navbar height********/

    .navbar-nav > li > a {
      padding-top: 4px !important;
      padding-bottom: 2px !important;
    }

    .navbar {
      min-height: 5px !important
    }
    /*********************************/

    header .navbar {
      margin-bottom: 0;
    }

    .navbar-default {
      border: none;
    }

    header .navbar-collapse ul.navbar-nav {
      float: right;
      margin-right: 0;
    }

    header .navbar-default {
      background-color: transparent;
    }

    header .navbar {
      min-height: 32px;
    }

    header .navbar-nav > li {
      padding-bottom: 5px;
      padding-top: 5px;
    }

    header .navbar-nav > li > a {
      padding-bottom: 5px;
      padding-top: 5px;
      margin-left: 2px;
      line-height: 30px;
      font-weight: 700;
    }

  </style>

  <header>
    <div class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <div class="logo">
            <a class="navbar-brand" href="index.php"><img src="./img/logo.png"></a>
          </div>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li><a href="about.php">about us</a></li>
            <li><a href="contact.php">Contacts</a></li>
          </ul>
        </div>
      </div>
    </div>
  </header>

  <div>content</div>

</body>

是否有人知道如何防止徽标消失，移动或调整大小，同时保持其余网站元素的响应？

Answer 1

这是因为您已将图片设置为以％为单位的尺寸，您必须将其更改为设定尺寸。这样：

.navbar-header div.logo a.navbar-brand img {
  width: 6%;
  padding: 15px;
}

应该是这样的：

.navbar-header div.logo a.navbar-brand img {
  width: 200px;
  padding: 15px;
}

如何在移动设备上保持徽标不会调整大小？

1 个答案: