我需要构建一个经典的 960px 布局，我必须将 960px 转换为 %。
所以，我应该使用960px / 16px = 60%，对吧？
注意：960px = 主体宽度
16px = 字体大小
问题：
body {width:60%;} /* 960 / 16px */
比
小很多body {width:960px;}
在相同的屏幕尺寸/分辨率/宽度。
我知道将其大小调整为 74% 看起来会更好，但随后我必须重新计算我的所有布局（边距、填充、宽度）以适应 74%。
我阅读了很多流体/响应/弹性文章，但我找不到计算合适体型的方法。
【问题讨论】：
body {width:960px}？
流体布局中计算body宽度的正确方法：
body {
width:100%;
max-width:960px;
height:100%;
margin:0 auto;
}
max-width 值应该是您的页面宽度，margin 不需要换页。
【讨论】：
看看这个：http://pxtoem.com/
【讨论】：
您需要屏幕尺寸才能计算 960 像素在该屏幕上所占的百分比。 (100/屏幕尺寸)*960 = %
【讨论】：
在 safari 和 chrome 上都存在同样的问题，但在 ff、ie-6-9 和 opera 上都能完美运行 我使用 css 还是 'bad' html 都没关系。第一个 td 是 133 像素，第二个是 869 像素，然后 总宽度为 1001 像素（？），包含 0 个单元格间距和单元格填充。 原因是单元格中的信息太少。我添加了 .td_left{min-width: 200px} .td_right{min-width: 800px}
【讨论】：
另外，一篇关于“流体网格”的非常好的文章，其中包括管理类型等。
From A List Apart: Fluid Grids “然而，我们的客户有最后一个令人心碎的要求：设计必须是流畅的，并且可以根据浏览器窗口调整大小。通常，这会让我感到既吵闹又尴尬。流畅的布局是一种被低估的商品网页设计。他们将我们的设计牢牢控制在我们的用户和他们的浏览习惯手中。他们也完全没能抓住网页设计师的想象力。”
【讨论】：
你可以这样解决这个问题：
将 body 视为 90%，这意味着屏幕的 90%，无论大小。
body{
width:90%;
margin: 0 auto;
}
现在考虑在 body 标签中的类容器
.container{
width:100% //This would utilize the complete 90% of the body, if you make the width 90% for container then it would consider 90% of 90% of body
margin: auto;
}
现在考虑您需要一个 5 列网格布局，并且您决定每列之间的间距为 2px，然后 100% - (2%+2%+2%+2%) = 92%（我没有添加再多一个 2% 是因为你将有 margin-left 或 margin-right = 0)
现在，除以 92/5（百分比/列），您将得到 18.4% 的值。这意味着为您创建的每一列分配 18.4% 的宽度，您将获得所需的完美布局。
这是一个可以解释的例子，复制整个代码并粘贴到一个空白文件中并将其保存为 index.html 或任何名称并运行：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Percentage Width</title>
<meta charset="utf-8">
<meta name="description" content="Demo">
<style type="text/css" media="screen">
* { margin:0; padding:0; }
body{
width:100%;
margin: 0 auto;
}
.container{
width:90%;
margin:auto;
text-align:center;
background: #363F3C;
overflow: hidden;
}
.column_5{
overflow: hidden;
width:100%; // This means full 90% of the parent element .container
}
.grid_1,.grid_2,.grid_3,.grid_4,.grid_5{
background:#399FDD;
width:18.4%;
margin: 0 2% 2% 0;
float:left;
}
.grid_5{
margin-right:0;
}
p{
color:#505054;
text-align:left;
padding:1.5em;
}
</style>
<body>
<div class="container">
<div class="column_5">
<div class="grid_1"><p>1st Column: <br />184px/1000px <br />18.4% </p></div>
<div class="grid_2"><p>2nd Column: <br />184px/1000px <br />18.4% </p></div>
<div class="grid_3"><p>3rd Column: <br />184px/1000px <br />18.4% </p></div>
<div class="grid_4"><p>4th Column: <br />184px/1000px <br />18.4% </p></div>
<div class="grid_5"><p>5th Column: <br />184px/1000px <br />18.4% </p></div>
</div>
</div>
</body>
</html>
运行上面的例子，多玩一点，你应该会很好地掌握。如果您进一步需要帮助，请随时与我联系。
问候， 乌迪特·葛印卡 http://www.iuditg.com
【讨论】：