菜單的大小取決於屏幕分辨率

我正在學習與朋友編程此刻，我們希望這兩個使我們的網站。我們正面臨一些前端菜單的問題。我們希望它是一個單頁，但在MVC中，所以我們可以在這些「單頁」之間切換不同的內容。要做一個頁面網站，我們按照這個教程：http://1stwebdesigner.com/parallax-scrolling-tutorial/
現在我們面臨調整菜單的問題。我們希望它看起來一樣，無論用戶看到它使用什麼樣的分辨率。這裏是我們想要修改的.css的一些代碼。菜單的大小取決於屏幕分辨率

#header { 
    width: 18%; 
    background: url('img/header-bg.png'); 
    height: 100%; 
    position :fixed; 
    margin-left: 1%; 
    text-align: center; 
} 
#nav { width: 200px; float: none; margin-top: 20px; } 

#nav ul{ 
list-style: none; 
display: block; 
margin: 0 auto; 
list-style: none; 
} 
#nav li{ 
margin-top: 100px; 
float:none; 
}

在我的設備上它看起來不錯，但在我的朋友有相同的屬性它不那麼好看。有人可以向我們發佈一些反饋信息，我們應該在哪些方面進行搜索以使其響應？用％代替px覆蓋所有屬性是否應該完成這項工作？感謝您提問:) PS我們只在桌面屏幕上才需要它。

來源

2016-04-22 Kacper Werema

第一其不是CPU的設備，但它的桌面畫面。閱讀有關媒體查詢或引導的響應。 –

好的，謝謝，所以我們正在進入一些引導教程找到它:) –

建議http://www.tutorialspoint.com/bootstrap/或w3cschool –

爲了改變菜單字體大小不同的屏幕分辨率。希望這段代碼能夠幫助你解決你的問題。

首先指定菜單項的font-size屬性。讓我們以實例

.sf-menu > li > a { 
font: bold 19px/22px Open Sans; 
}

做要更正字體大小值，那將是小到足以保持在一排你的菜單項，你可以重寫規則。例如：

.sf-menu > li > a { 
font-size: 16px !important; 
}

然後，寫@media查詢每個寬度調整字體的正確的大小爲：

@media only screen and (min-width: 768px) { 
.sf-menu > li > a { 
font-size: 11px !important; 
} 
}   
@media only screen and (min-width: 980px) { 
.sf-menu > li > a { 
font-size: 14px !important; 
} 
}   
@media only screen and (min-width: 1280px) { 
.sf-menu > li > a { 
font-size: 16px !important; 
} 
}

來源

2016-04-22 13:25:33