レスポンスNavbarでのスケーリングの問題

私はこのページのために、tutorialに応じてレスポンシブなnavbarを作成しようとしました。私は正しいビューを取得し、ブラウザのサイズを変更した後レスポンスNavbarでのスケーリングの問題

が、私は私のページを表示するために携帯電話を使用していたときに、すべてがこの絵のように、本当に小さいです：

これはチュートリアルから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>

誰かが私を見て0を達成できるかを教えてもらえ電話での権利もありますか？それは正しい私に比例万力に見える

出典

2016-11-29 Fynn

。ここ

詳細情報：https://css-tricks.com/snippets/html/responsive-meta-tag/

出典

2016-11-29 16:25:09

それはうまくいった！どうもありがとうございました！ – Fynn

大歓迎です。レスポンシブなデザインでお任せください！ –

、私は1.25の乗数によってすべての要素のfont-sizeを増加させる（その15ピクセルが18pxになります）

出典

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クラスをオーバーライドして、モバイルでより大きなフォントを持つようにします。

あなたはまた、すべてのフォントサイズを変更するには、以下のんでした：

あなたはこれがあなたの幅が画面サイズに相対的であることが保証されますあなたの <head>

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

でこれを追加する必要が

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

出典

2016-11-29 16:01:11 KenSchnetz

レスポンスNavbarでのスケーリングの問題

答えて

関連する問題