固定时，如何使导航中的字体大小保持不变

Question

在移动站点上，当有人放大页面上时，导航文本变得更大，并在导航栏上占用了更多的空间。放大台式机时也会发生同样的事情。

我可以。

/* 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*/

。

Answer 1

您应该使用媒体查询来维持不同分辨率中的不同字体大小。喜欢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 */

} }

Answer 2

我找到了解决问题的替代解决方案，我使用了一个序列标签来禁用缩放/捏在移动设备上，但是在Internet上找到类似的元标记，我重写了自己。我必须确保将最小规模设置为" 0"，并将最大规模设置为" 1"，而不会说明初始规模。

使用此移动设备将自动检测您的网站 景观上的大小，您的网站增长甚至更清晰！！