將靜態佈局轉換爲％百分比佈局使用css

我已經放在一起簡單的靜態佈局，我會知道如何將靜態寬度轉換爲百分比以最終創建響應式網頁佈局。任何人都可以推薦最簡單的方法來計算佈局寬度，字體大小，填充和邊距百分比？我很習慣以靜態格式創建我的佈局，但我很想完全理解如何實現這種％技術。將靜態佈局轉換爲％百分比佈局使用css

鏈接到我的簡單的佈局是在這裏：http://jsfiddle.net/9fH87/

所有的建議表示歡迎，感謝凱爾

2011-10-04 styler

你真的應該使用該代碼製作一個jsfiddle或jsbin，以便我們可以使用您的代碼而不是讓所有嘗試回答使用猜測的人都知道您的代碼應該看起來像 –

hi mark，jsfiddle now now – styler

這是它應該是什麼樣子？這是使用你的代碼：http://jsbin.com/adasah/3/ –

有45％的更換兩列的寬度固定，你會得到一個流體佈局，這意味着它適合自身在容器上的佈局。
你可以在an easy search找到大量的例子。由阮經天馬科特@一本書除了

這本書，以PDF格式下載也可

2011-10-05 00:06:01 pasine

-1

老實說，百分比是一個壞主意，因爲它們對應於視有多寬是所有的時間，如果你將視口調整得更近一些，所有的單詞都會一起擠壓。

最好的辦法是製作一個容器div（將其命名爲body-container），給它任意你想要的寬度，然後使用這個代碼將它居中margin: 0 auto;然後將body的最小寬度設置爲可接受的東西。 1080像素通常很好，因爲現在大多數人的分辨率至少爲1080寬。

2011-10-04 23:07:53

嗨馬克，基本上我想要實現一個響應式設計，最終使用媒體查詢，我希望通過控制我的佈局，以不同的分辨率來防止'shishing' – styler

如果你只添加'min-width：1080px ;對身體。以下是示例：http://jsbin.com/ufesif（我使用jsbin是因爲它更適合使用佈局） –

使用媒體查詢是如何解決對視口大小的擔憂，並且一直用於移動應用程序。這種用法現在也正在向桌面瀏覽器邁進。 – Rob

響應性網頁設計，很好地解釋了這一切。它是一個快速閱讀。

2011-11-17 10:05:30 DBUK

回答