Problem calculating percentage for body width
I need to build a classic 960px layout and I have to convert that 960px into %.
So, I should use 960px / 16px = 60%, right?
Note: 960px = body width
16px = font size
The problem:
body {width:60%;} /* 960 / 16px */
is a lot smaller than
body {width:960px;}
at same s开发者_开发百科creen dimensions/resolution/width.
I know that just resizing it to 74% looks better but then I have to re-calculate all my layout (margins, paddings, widths) to fit that 74%.
I have read a lot fluid/responsive/elastic articles and I cannot find out a way to calculate a proper body size.
The right way to calculate body width in a fluid layout:
body {
width:100%;
max-width:960px;
height:100%;
margin:0 auto;
}
The max-width value should be whatever your page width is, and margin does not need a page wrap.
Look at this: http://pxtoem.com/
You will need the screen size in order to calculate the percentage 960px will take on that screen. (100/screensize)*960 = %
same problem on both safari and chrome, but works perfectly on ff, ie-6-9 and opera it doesn't matter whether i use css or 'bad' html. First td is 133 px, second is 869px, and total width is 1001px (?), with 0 cellspacings and cellpaddings. The reason was too small info in cells. I added .td_left{min-width: 200px} .td_right{min-width: 800px}
Also, a really good article on "Fluid Grids" that includes managing type, etc.
From A List Apart: Fluid Grids "However, our client had one last, heart-stopping requirement: the design had to be fluid and resize with the browser window. Normally, this would cause me to rejoice both noisily and embarrassingly. Fluid layouts are an undervalued commodity in web design. They put control of our designs firmly in the hands of our users and their browsing habits. They’ve also utterly failed to seize the imagination of web designers."
This is how you can solve this:
consider body to be 90% which would mean 90% of the screen whatever be the size.
body{
width:90%;
margin: 0 auto;
}
Now consider a class container within the body tag
.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;
}
Now Consider you need a 5 column grid layout and you decide you have a gutter of 2px between each column then 100% - (2%+2%+2%+2%) = 92% (I didn't added one more 2% is because you are going to have margin-left or margin-right = 0)
Now, divide 92/5 (percentage/columns) you would get an value of 18.4%. This would mean allocate 18.4% of width to each column you create and you would get the perfect layout you want.
Here is an example that can explain you, copy the entire code and paste in a blank file and save it as index.html or any name and run:
<!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>
Run the above example and play a bit more and you should get a good grasp. If you further need help feel free to contact me.
Regards, Udit Goenka http://www.iuditg.com
加载中,请稍侯......
精彩评论