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

我为我的问题找到了另一种解决方案，我使用了配对标签来禁用移动设备上的缩放/捏合，但是这个元标记在互联网上找到一个类似的东西后重写了自己。我必须确保最小比例设置为“0”并且最大比例设置为“1”而不说明初始比例。

使用此移动设备将自动检测您的网站的大小+在景观上您的网站变得更加清晰!!!

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

2 个答案: