Question

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

Answer 1

使用@media规则解决此问题。它还可以使您的页面移动友好。 http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

编辑：我会将你的固定位置改为绝对值以避免这种情况。但是如果您已经设置在固定位置，则可以更新媒体查询以允许溢出：滚动。这样，如果用户放大太远，用户可以滚动导航而不是被切断。

你也应该删除你所有的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：

<header>
    <div id="menu_icon"></div>
    <nav>
         <ul>
            <li><a href="about.html" class="selected">About</a></li>
            <li><a href="resume.html" class="selected">Resume</a></li>
            <li><a href="skills.html" class="selected">Skills</a></li>
            <li><a href="portfolio.html" class="selected">Portfolio</a></li>
            <li><a href="gallery.html" class="selected">Map&nbsp;Gallery</a></li>
            <li><a href="thesis.html" class="selected">Thesis</a></li>
            <li><a href="contact.html" class="selected">Contact</a></li>
        </ul>
    </nav>
    <!--end sidebar-->
 </header>

Answer 2

如果您的头部有视口标记，请尝试使用vw和vh作为字体。

viewport标签：

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

CSS就像这样

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

Answer 3

我明白了。

我必须围绕$('input').on('keyup', function(e){ var str=$('input').val(); if(str.length>6&&str.indexOf('-')!=6) str=str.slice(0,6)+'-'+str.slice(6); else if(str.length==6) str+='-'; $('input').val(str); });和position: relative进行更改才能保持一致。

一切都很好，谢谢大家。

修复导航栏以在用户放大时进行调整

3 个答案: