使用響應式導航欄縮放問題

我試圖通過以下tutorial爲我的頁面創建響應式導航欄。使用響應式導航欄縮放問題

調整瀏覽器後，我得到正確的觀點，但是當我使用的是手機，以顯示我的網頁，一切都是非常小的，像這樣的畫面：

這是從教程中的CSS，只是有點改變：

body {margin:0;} 
ul.topnav { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #373a3c!important; 
} 

ul.topnav li { 
    float: left; 
} 

ul.topnav li a { 
    display: inline-block; 
    color: #f2f2f2; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
    transition: 0.3s; 
    font-size: 17px; 
} 

ul.topnav li a:hover {background-color: #555;} 

ul.topnav li.icon {display: none;} 

@media (orientation: portrait) { 
    ul.topnav li:not(:first-child) {display: none;} 
    ul.topnav li.icon { 
    float: right; 
    display: inline-block; 
    } 
} 

@media (orientation: portrait) { 
    ul.topnav.responsive {position: relative;} 
    ul.topnav.responsive li.icon { 
    position: absolute; 
    right: 0; 
    top: 0; 
    } 
    ul.topnav.responsive li { 
    float: none; 
    display: inline; 
    } 
    ul.topnav.responsive li a { 
    display: block; 
    text-align: left; 
    } 
}

HTML：

<ul class="topnav" id="myTopnav"> 
    <li class="active" onmouseover="hover();" onmouseout="unhover();"> 
     <a href="./index.html"><img id="logo" src="./images/logo_white.png" /></a> 
    </li> 
    <li><a href="./index.html">Sensoren</a></li> 
    <li><a href="./keyServers.html">Schl&uuml;sselserver</a></li> 
    <li><a href="./trustSystem.html">Vertrauensgewichtung</a></li> 
    <li><a href="./pluginManager.html">Plugin-Manager</a></li> 
    <li><a href="./logEvents.html">Log-Events</a></li> 
    <li class="icon"> 
    <a href="javascript:void(0);" style="font-size:15px;" onclick="enableBurgerMenu()">☰</a> 
    </li> 
</ul>

有人能告訴我怎樣能達到外觀Ø在電話右邊呢？

來源

2016-11-29 Fynn

您需要在您的<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

添加此這將確保您的寬度是相對於屏幕尺寸。

點擊此處瞭解詳情：https://css-tricks.com/snippets/html/responsive-meta-tag/

來源

2016-11-29 16:25:09

工作正常！非常感謝你！ – Fynn

非常歡迎。保持響應式設計！ –

它看起來正確的我比老虎鉗，我只會以1.25倍的乘數增加的所有元素的font-size（所以15px的將成爲18像素）

來源

2016-11-29 15:50:05 Aca85

好了，在PC上一切看起來大得多，因爲屏幕較大，但分辨率是一樣的。我試圖實現的是，在手機上，一切和我在PC上使用一個小型瀏覽器窗口時一樣大，因爲目前它在手機上使用太小。 – Fynn

我將以下內容添加到您的CSS：

@media screen and (max-width: 480px) { 
    ul.topnav li a { 
     font-size: calc(17px * 1.5); 
    } 
}

基本上，這會覆蓋您已在CSS中擁有更大字體的ul.topnav li a類。

你也可以執行以下操作來更改所有字體大小：

@media screen and (max-width: 480px) { 
    body { 
     font-size: calc(17px * 1.5); 
    } 
}

來源

2016-11-29 16:01:11 KenSchnetz

使用響應式導航欄縮放問題

回答

相關問題