将静态布局转换为％百分比布局使用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

回答