如何使導航中的字體大小在修復時保持不變？

在移動網站上，當有人在頁面上放大時，導航文字變得更大，並且在導航欄上佔用更多空間。在臺式機上放大時會發生同樣的事情，但我確定。如何使導航中的字體大小在修復時保持不變？

/* Navigation 
--------------------------------------------------------------------------------*/ 
.nav-container-fixed { 
top: 0; 
z-index: 100; 
position: fixed; 
width: 100%; 
min-width:100%; 
} 

#nav-wrap .nav-container { 
float:right; 
right:0em; 
text-align:left; 
padding-left:0%; 
position: fixed; 
top:0%; 
z-index:300; 
background:#242424; 
border-bottom: 1px solid #fff; 
border-top:60px solid #fff; 
margin-top:-18px; 
min-width:100%; 
max-width:100%; 
height:2.9em; 
max-height:2.9em; 
opacity:0.96; 
} 

#nav-wrap .nav-container ul{ 
float:right; 
list-style:none; 
position:relative; 
left:0%; 
z-index:2; 
padding-left:0px; 
} 

#nav-wrap .nav-container li{float:left;position:relative;} 

#nav-wrap .nav-container a{ 
text-decoration:none; 
font:600 16px 'Josefin Sans', sans-serif,bold; 
text-transform:inherit; 
margin:10px 20px; 
float:left; 
color:#fff; 
letter-spacing:2px; 
text-align:right; 
white-space:nowrap; 
padding-top:5px; 
overflow:hidden; 
position:relative; 
font-size:relative !important; 
} 
#nav-wrap .nav-container a:hover{ 
-webkit-animation-name: spaceboots; 
-webkit-animation-duration: 0.8s; 
-webkit-transform-origin:50% 50%; 
-webkit-animation-iteration-count: infinite; 
-webkit-animation-timing-function: linear; 
border-bottom:1px dashed #ff0000; 
} 
#nav-wrap .nav-container li#active a { 
border-bottom:3px solid #5882FA !important; 
} 
#nav-wrap .nav-container a:active{ 
padding:2px 2px 0px; 
} 
#nav-wrap {overflow:hidden}/* hide horizontal scrollbar*/

。

來源

2014-01-22 justinpees

您應該使用媒體查詢來維護不同分辨率的不同字體大小。像H1

h1 { 
    font-size: 2em; 
    /* 2x body copy size = 32px */ 
    line-height: 1.25; 
    /* 45px/36px */ 
} 

@media (min-width: 43.75em) { 
    h1 { 
    font-size: 2.5em; 
    /* 2.5x body copy size = 40px */ 
    line-height: 1.125; 
    } 
} 

@media (min-width: 56.25em) { 
h1 { 
font-size: 3em; 
/* 3x body copy size = 48px */ 
line-height: 1.05; 
/* keep to a multiple of the 20px line height 
and something more appropriate for display headings */

} }

來源

2014-01-22 08:45:52

不確定更改h1會對我的導航文本有任何影響，因爲我的導航面板的文本在此處指定爲：＃nav-wrap .nav-container a { text-decoration：none; font：600 16px'Josefin Sans'，sans-serif，bold; text-transform：inherit; margin：10px 20px; float：left; color：#fff; letter-spacing：2px; text-align：right; white-space：nowrap; padding-top：5px; 溢出：隱藏; 位置：相對; font-size：relative！important; } – justinpees

我發現我的問題的替代解決方案，我使用的伴侶標籤禁用縮放/夾持在移動設備，然而，這元標記我改寫自己找到一個後在互聯網上類似。我不得不確定最小比例設置爲「0」，最大比例設置爲「1」，但不說明初始比例。

有了這個移動設備會自動檢測景觀網站+的大小您的網站的增長更加明顯！

來源

2014-01-25 06:28:03 justinpees

如何使導航中的字體大小在修復時保持不變？

回答

相關問題