使用em或CSS網格佈局的百分比

我正在3-4頁的網站上工作。它將爲大部分頁面使用jQuery，jQuery UI和Ajax調用。我希望不必編碼任何像素。使用em或CSS網格佈局的百分比

到目前爲止我我已經花了幾天看的解決方案，我的頭在旋轉，因爲我看不到我想要的。我試圖決定如何最好地佈置網站，以便它能夠響應，並且能夠很好地適應瀏覽器大小的變化。在我看來，使用百分比或em設計的頁面比使用固定px進行佈局的頁面調整得更好。

不知道，但我覺得用「網格」，如黃金網或其他一些人在那裏會矯枉過正。我正在考慮這樣做？

#container { 
    max-width: 75em; 
    margin: 0 auto; 
} 

#primary { 
    float:left; 
    width: 25%; 
} 

#content { 
    float:left; 
    width:50%; 
} 

#secondary { 
    float:left; 
    width:25%; 
}

我應該使用百分比的寬度，或者我應該以某種方式與ems做到這一點。我希望我能得到一些好的建議。

感謝

來源

2012-04-02 Samantha J T Star

如果它真的很簡單，內飾應該是％外觀取決於你......這更多是一種偏好問題 – 2012-04-02 16:04:17

它總是一種折衷。在25英寸寬的情況下，在智能手機上可能過於狹窄，但在全高清桌面顯示器上太寬。有些東西需要百分比寬度，其他東西需要'em'或'ch'中的寬度。如果你保持塊漂浮（你可以忍受漂浮的缺點），結果可能在窄屏幕和寬屏幕上看起來都不錯。但不要指望它。測試！ – 2012-04-02 16:07:45

您可以使用此：http://grids.heroku.com/，當你預覽/下載選擇流體寬度選項。

來源

2012-04-02 16:04:02 mikevoermans

謝謝。我會檢查你給我的鏈接。 – 2012-04-02 16:15:23

第一：在你的情況下使用的百分比。百分比取決於其父元素，而em基於字體大小。如果您想根據瀏覽器大小調整網站大小，請使用％，如果您希望網站在用戶更改字體大小時調整大小，請使用em。

一些額外的想法：

從我的經驗的百分比選擇，PX，EM取決於項目（因此該網站的目標）。

如果網站是某種組合，我建議使用pixelbased佈局。（因爲大多數人將它們視爲他們工作的數字版本，並希望它看起來像（預先制定的）草稿）。這樣你可以得到一個不錯的結果，但是在調整網站大小時可能會遇到問題（例如文本變大）。

在這種情況下，（顯然）相對系統是更好的，因爲它們很好地擴展。這通常更方便用戶使用，因爲您可以保證容器的尺寸合適。如果您想讓網站更易於訪問，請使用此功能。

請記住，你可以使用基於像素/相對佈局，仍然解決其他問題。總體佈局通常以％爲基礎，但一些容器是基於像素的。

由於您使用JS來增強您的網站，您可以使用它，動態調整網站大小或做其他事情（儘管我不會推薦這個，如果它不是必要的，由於事實，不是所有人都使用JS（但這是另一回事））

來源

2012-04-02 16:17:55

使用em或CSS網格佈局的百分比

回答

相關問題