如何使響應瀏覽器的導航鏈接調整

我試圖做一個website我開發響應，到目前爲止，我想使響應在瀏覽器窗口中更改除導航文本運作良好，元素大小和位置...如何使響應瀏覽器的導航鏈接調整

的HTML彌補網頁看起來像這樣

<div id="nav"> 
    <ul> 
     <li> 
     <div class="navtext"><a href="index.php">Home</a></div> 
     </li> 
     <li> 
     <div class="navtext"><a href="bio.php">Bio</a></div> 
     </li> 
     <li> 
     <div class="navtext"><a href="resume.php">Resume</a></div> 
     </li> 
     <li> 
     <div class="navtext"><a href="reel.php">Reel</a></div> 
     </li> 
     <li> 
     <div class="navtext"><a href="recommendation.php">Recommendation</a></div> 
     </li> 
     <li> 
     <div class="navtext"><a href="gallery.php">Gallery</a></div> 
     </li> 
     <li> 
     <div class="navtext"><a href="contact.php">Contact</a></div> 
     </li> 
    </ul> 
</div>

我已經加入到CSS媒體查詢看起來像這樣

@media only screen and (max-width: 479px) { 
    #nav{ 
     width: 905px; 
     position: relative; 
     float: right; 
     margin-left: 500px; 
    } 

    #nav ul { 
    list-style: none; 
    padding: 10px 0px 0px 1px; 
    margin: 0; 
    } 

    #nav ul li { 
    list-style: none; 
    float: left; 
    padding: 0 0 0 20px; 
    font-weight: normal; 
    } 

    .navtext a { 
    font-size:2.2em; 
    padding: 1px 5px 1px 5px; 
    } 
}

屏幕尺寸重設後 - http://i.stack.imgur.com/jvaKe.png

來源

2013-01-01 user1843335

當你看到較小的屏幕尺寸，用戶百分比。另外，刪除唯一的屏幕。這將添加移動支持 –

你可以通過使寬度和啓動利潤率左的#nav股利少

#nav{ 
    width: 905px; /* too wide for (max-width: 479px) screen */ 
    position: relative; 
    float: right; 
    margin-left: 500px; /* too wide for (max-width: 479px) screen */ 
}

來源

2013-01-02 17:04:09

對於響應導航我用這個http://tinynav.viljamis.com/（其MODERM尋找響應小屏幕解決方案），因此您應該只使用em和％作爲元素。

來源

2013-01-04 13:58:07 Lucky

我喜歡你的鏈接@Lucky –

如何使響應瀏覽器的導航鏈接調整

回答

相關問題