下文就根據(jù)css-tricks上的解決方案,討論如何實(shí)現(xiàn)第二種方法,實(shí)際上是很簡(jiǎn)單的。

3.
首先,網(wǎng)頁(yè)的缺省寬度,確定為滿足1024px寬度的顯示器。這不僅因?yàn)?024x768是現(xiàn)在最常見(jiàn)的分辨率,還因?yàn)檫@個(gè)寬度對(duì)網(wǎng)頁(yè)最合適:1)它放得下足夠的內(nèi)容,足夠三欄的布局;2)單行文字不宜太長(zhǎng),1024px已是極限,否則容易產(chǎn)生閱讀疲勞;3)在當(dāng)前的互聯(lián)網(wǎng)帶寬條件下,網(wǎng)頁(yè)難以采用大分辨率所要求的大尺寸圖片。
其次,網(wǎng)頁(yè)寬度會(huì)在780px-1260px的范圍內(nèi),自動(dòng)變化,即最小不小于780px,最大不超過(guò)1280px。
最后,對(duì)于更大的分辨率,網(wǎng)頁(yè)內(nèi)容會(huì)自動(dòng)居中。
4.
下面就是CSS文件的寫(xiě)法,只要4行。需要注意的是,這幾行的語(yǔ)句都針對(duì)整個(gè)頁(yè)面,即body標(biāo)簽或者最外層的那個(gè)div區(qū)域。
margin: 10px auto;
這一行保證了網(wǎng)頁(yè)在任何分辨率下,都會(huì)居中。
min-width: 780px;
max-width: 1260px;
這二行規(guī)定了網(wǎng)頁(yè)的最小和最大寬度。注意,IE6不支持這二行,即它們?cè)贗E6中是無(wú)效的。
這一行是針對(duì)IE6的解決方法。它采用了CSS表達(dá)式,也可以通過(guò)javascript實(shí)現(xiàn)。width:expression(document.body.clientWidth < 782? "780px" : document.body.clientWidth > 1262? "1260px" : "auto");
另外,如果想讓內(nèi)層的各個(gè)區(qū)塊也自動(dòng)伸縮,它們的寬度可以采用百分比的形式,比如:
#div-left{
width:50%;
}#div-right{
width:50%;
}
最后的效果和源碼下載請(qǐng)查看這里。通過(guò)變動(dòng)瀏覽器窗口的大小,可以發(fā)現(xiàn)網(wǎng)頁(yè)在780px-1260px的范圍內(nèi)會(huì)自動(dòng)伸縮。
5.
最后,建議大家平時(shí)使用計(jì)算機(jī)的時(shí)候,不要盲目采用高分辨率,意義不大。
新聞熱點(diǎn)
疑難解答
圖片精選