問題計算百分比車身寬度

我需要建立一個經典的寬960px佈局，我必須是960像素轉換成％。所以，我應該使用960px/16px = 60%，對不對？問題計算百分比車身寬度

注意：960像素=車身寬度
16px的=字體大小

問題：

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

比

body {width:960px;}

小了很多在相同的屏幕尺寸/分辨率/寬度。

我知道，只是將其調整到74％看起來更好，但後來我不得不重新計算所有我的佈局（頁邊距，填充，寬度），使其適用於74％。

我已經讀了很多流體/響應/彈性的文章，我無法找到一個方法來計算一個合適的車身尺寸。

來源

2011-05-13 Martin

如果使用百分比，你必須知道用戶的窗口大小。你爲什麼不使用'body {width：960px}'？ – bfontaine 2011-05-14 14:37:35

@boudou我正在構建流體佈局。所以，我確實需要％和em – Martin 2011-05-14 15:31:31

來計算流體佈局車身寬度正確的做法：

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

的max-width值應該是無論你的頁面寬度，並且margin不需要頁面換行。

來源

2011-05-14 23:22:10 Martin

看看這個：http://pxtoem.com/

來源

2011-05-13 19:24:11 Satish

此外，在「流體網格」一個真正的好文章，其中包括管理型等

From A List Apart: Fluid Grids 「不過，我們的客戶有一個最後，心臟停止跳動要求：設計必須是油，並用瀏覽器窗口大小調整通常情況下，這將導致我吵鬧和尷尬歡慶流體佈局在網頁設計中被低估的商品，他們把我們設計的控制牢牢掌握在手中了。用戶和他們的瀏覽習慣，他們也完全沒有抓住網頁設計師的想象力。「

來源

2011-05-13 19:30:11

您將需要以計算百分比爲960px將採取屏幕上的畫面尺寸。（100 /屏幕尺寸）* 960 =％

來源

2011-05-14 14:21:22 Chris

同樣的問題在兩個Safari和Chrome，但完美的作品在FF，即6-9和歌劇沒關係我是使用CSS或「壞」的HTML。第一個td是133px，第二個是869px，並且總寬度是1001px（？），0格距和cellpaddings。原因是單元格中的信息太小。我加.td_left {最小寬度：200像素} {.td_right最小寬度：800像素}

來源

2011-06-29 06:10:38 megamanx

-1

這是你如何解決這個問題：

考慮身體是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戈恩卡 http://www.iuditg.com

來源

2012-02-01 18:59:24 iuditg

問題計算百分比車身寬度

回答

相關問題