Question

我需要构建一个经典的960px布局，我必须将该960px转换为％。所以，我应该使用960px / 16px = 60%，对吧？

注意：960px =体宽
16px =字体大小

问题：

body {width:60%;} /* 960 / 16px */

远小于

body {width:960px;}

在相同的屏幕尺寸/分辨率/宽度。

我知道只需将其调整为74％看起来更好但我必须重新计算所有布局（边距，填充，宽度）以适应74％。

我已经阅读了很多液体/反应/弹性物品，我找不到计算合适体型的方法。

Answer 1

在流体布局中计算体宽的正确方法：

body {
    width:100%;
    max-width:960px;
    height:100%; 
    margin:0 auto;
}

max-width值应该是您的页面宽度，margin不需要页面换行。

Answer 2

看看这个：http://pxtoem.com/

Answer 3

您需要屏幕尺寸才能计算960px在该屏幕上的百分比。（100 /屏幕尺寸）* 960 =％

Answer 4

同样的问题在safari和chrome上，但在ff，即-6-9和opera上完美运行无论我使用css还是'bad'html都没关系。第一个td是133像素，第二个是869像素，和总宽度为1001px（？），具有0个cellpacings和cellpaddings。原因是细胞中信息太小。我添加了.td_left {min-width：200px} .td_right {min-width：800px}

Answer 5

另外，关于“流体网格”的一篇非常好的文章，包括管理类型等。

From A List Apart: Fluid Grids “然而，我们的客户有一个最后，令人心碎的要求：设计必须流畅，并通过浏览器窗口调整大小。通常，这将使我既吵闹又尴尬地欢欣鼓舞。流体布局是一种被低估的商品。网页设计。他们将我们的设计控制牢牢地掌握在用户和他们的浏览习惯之中。他们也完全没有抓住网页设计师的想象力。“

Answer 6

这是你可以解决这个问题的方法：

认为身体是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％是因为你将有保证金左边或保证金权利= 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>

运行以上示例并进行更多操作，您应该抓紧抓好。如果您需要帮助，请随时与我联系。

此致 Udit Goenka http://www.iuditg.com

计算体宽百分比的问题

6 个答案: