通常設(shè)計(jì)師在設(shè)計(jì)PC端網(wǎng)頁時(shí)會(huì)將頁面主要的信息內(nèi)容置于頁面中間的1200px范圍內(nèi)勇婴，這1200px也就是俗稱的版心了悠汽。這是網(wǎng)頁設(shè)計(jì)的規(guī)則之一窖张，目的是幫助前端制作PC端的頁面自適應(yīng)蚂斤。目前市面上主流的屏幕分辨率是1920*1080屁桑，此外還有1440*900以及1680*1050等等。而設(shè)計(jì)師一般給出的設(shè)計(jì)圖都是1920*1080版的纠修。
如果完全將網(wǎng)頁完全按設(shè)計(jì)圖還原祝拯，不做自適應(yīng)，遇到小屏?xí)r就會(huì)出現(xiàn)網(wǎng)頁顯示不全需要用戶移動(dòng)頁面底端滑條才能看到完整網(wǎng)頁內(nèi)容的情況缭受。這會(huì)讓用戶體驗(yàn)極差胁澳。百度所用的方法是讓內(nèi)容靠右，已達(dá)到最大限度的展示所有內(nèi)容米者。但對于其他以內(nèi)容展示為目標(biāo)的網(wǎng)站韭畸，讓用戶一直扭著脖子觀看實(shí)在不妥。
所以我們還是老老實(shí)實(shí)居中吧蔓搞。
說起來也是很簡單胰丁，寫頁面時(shí)可以將先建立一個(gè)寬度自動(dòng)跟瀏覽器寬度一致即width：100%的盒子。然后再在這個(gè)盒子中放入一個(gè)固定寬度1200px的盒子喂分，將其居中position：relation锦庸；margin:0 auto;在將內(nèi)容寫在這個(gè)1200px的盒子中即可。
這時(shí)候就有人要問很多時(shí)候設(shè)計(jì)師會(huì)在超過版心的地方設(shè)計(jì)有裝飾插畫蒲祈，且大部分背景圖片也超過1200px又該怎么辦甘萧。這時(shí)候就要用到外面那個(gè)寬度100%的大盒子了。我們可以把背景圖片非平鋪居中置于大盒子中梆掸。這里還要注意記得給大盒子寫入最小寬度為1200px,以保證不會(huì)因?yàn)闉g覽器被調(diào)節(jié)寬度過小而導(dǎo)致背景圖型變扬卷。而小面積超出版心的裝飾插畫放置是也應(yīng)該基于版心利用相對位置放置，已達(dá)到最大程度的適應(yīng)瀏覽器大小去展示頁面最主要內(nèi)容酸钦。
最后這兩端代碼編譯后就能很直觀的展示這篇文章所說的事情
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>無自適應(yīng)居中</title>
</head>
<style type="text/css">
.content{
width: 1920px;
height: 600px;
background: #adf;
}
.cont{
width: 1200px;
height: 600px;
position: absolute;
left: 360px;
background: #FD3800;
}
</style>
<body>
<div class="content">
<div class="cont">
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>有自適應(yīng)居中</title>
</head>
<style type="text/css">
.content{
width: 100%;
min-width: 1200px;
height: 600px;
background: #adf;
}
.cont{
width: 1200px;
height: 600px;
margin: 0 auto;
background: #FD3800;
}
</style>
<body>
<div class="content">
<div class="cont">
</div>
</div>
</body>
</html>
