Html 固定导航栏，以便在用户放大时进行调整

这个问题无关紧要。删除，不再需要。

使用@media规则修复此问题。 它还可以使您的页面移动友好。

编辑：为了避免这种情况，我会将您的固定位置更改为绝对位置。但是，如果您在固定位置上死心塌地，您可以更新您的媒体查询以允许overflow-y:scroll。这样，如果导航放大得太远，用户可以滚动导航，而不是被切断

您还应该删除所有div，除非您有很好的理由让它们转换。以下是我所做的：

header {
     display: block;
     position: absolute;
     top: 0;
     left: 0;
     width: 260px;
     padding: 0 0 0 50px;
     background: #FFFFFF;
     float: left;
     overflow: hidden;
     z-index: 9999;
 }
header nav {
     width:75%;
     height: 100%;
     position: relative;
     padding:0px;
     margin-left:20%;
 }
 header nav ul {
     display: block;
     overflow: hidden;
     margin-top: 30px;
     margin-left: -15px;
     list-style: none;
 }
 header nav ul li {
     display: block;
     margin-bottom: 30px;
     margin-top: 50px;
     width:50%;
     height: 30px;
     position: relative;
 }
 header nav ul li a {
     color: #000000;
     font-family:"raleway-regular", arial;
     font-size: 20px;
     text-decoration: none;
     letter-spacing: 2px;
     transition: 0.5s;
 }
 header nav ul li a:hover {
     color: #8AE6B8;
     padding-left: 20%;
 }
 header nav ul li a:active {
     color: #CC99FF;
 }

 header .footer {
     position: absolute;
     bottom: 50px;
 }

html:

如果您的脑海中有viewport标签，请尝试使用vw和vh作为字体

视口标记：

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

我想出来了

我只需要改变

位置：相对的
和
位置：绝对的
来保持一致

一切都很好，谢谢大家。
对不起，我有“@media（最小宽度：1100px）{”在页眉顶部。将更新代码。仍然不起作用。只是尝试了一下，它使fotn的大小变大了，但当页面放大时，它仍然没有做任何更改。这可能是因为您在宽度上使用像素作为大小。当我使用vp标记编写代码视口时，我喜欢使用%'s和vw/vh。
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" >

     header nav ul li a {
        color: #000000;
        font-family:"raleway-regular", arial;
        font-size: 5vh;
        font-size: 5vh;
        text-decoration: none;
        letter-spacing: 2px;
     }