如何在移動設備上保持徽標不會調整大小？

我認爲正在發生的事情是圖像越來越萎縮直至消失，我希望保持它的大小相同，甚至在移動，也夷爲導航裏的其餘/漢堡如何在移動設備上保持徽標不會調整大小？

<!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>

不任何人都知道如何讓徽標不再消失，移動或調整大小，同時保持其他網站元素的響應？

來源

2017-03-10 patriciacodes

目標的標誌與你的CSS，並使其成爲一個集大小，％是不會保持相同的大小，因爲它是相對於父母，你在體標籤中也有你的風格規則，爲什麼你不把它們放在標籤中？ – PhilS

這是因爲您已將圖像設置爲以％爲單位的大小，您必須將其更改爲設定大小。這：

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

應該是這樣的：

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

來源

2017-03-10 15:58:29

如何在移動設備上保持徽標不會調整大小？

回答

相關問題