九色国产,午夜在线视频,新黄色网址,九九色综合,天天做夜夜做久久做狠狠,天天躁夜夜躁狠狠躁2021a,久久不卡一区二区三区

1.

設(shè)計(jì)網(wǎng)頁的時(shí)候，確定寬度是一件很苦惱的事。

以minifun.cn為例，根據(jù)Google Analytics的統(tǒng)計(jì)，半年多以來，訪問者的屏幕分辨率一共有81種。最小的分辨率是122x160，這應(yīng)該是手機(jī)；最大的分辨率是3360x1050，天知道是什么設(shè)備。

一張網(wǎng)頁要在大小如此懸殊的各種屏幕上，都呈現(xiàn)令人滿意的效果，難度可想而知。舉例來說，一張400px寬的圖片，在800px的屏幕上會(huì)占據(jù)50%的寬度，而在1920px的屏幕上（Windows Vista的流行設(shè)置），只占據(jù)20%。

2.

目前，常見的屏幕分辨率寬度大概有6種：800px，1024px，1280px，1440px，1680px和1920px。其中，1024px最常見，但是隨著大屏幕顯示器的流行，更高的分辨率正變得越來越多。

常見的解決方法有兩種：

第一種：用javascript根據(jù)不同的客戶端分辨率，選擇css樣式表文件，具體的做法可以看這里。

第二種：采用彈性布局（Fluid Width Layout），實(shí)現(xiàn)網(wǎng)頁寬度的自適應(yīng)。

第一種方法的優(yōu)點(diǎn)是，可以根據(jù)不同屏幕分辨率，采用完全不同的布局，缺點(diǎn)是要設(shè)計(jì)和維護(hù)多張樣式表，比較麻煩。第二種方法只采用一張樣式表，比較省事。

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

3.

首先，網(wǎng)頁的缺省寬度，確定為滿足1024px寬度的顯示器。這不僅因?yàn)?024x768是現(xiàn)在最常見的分辨率，還因?yàn)檫@個(gè)寬度對(duì)網(wǎng)頁最合適：1）它放得下足夠的內(nèi)容，足夠三欄的布局；2）單行文字不宜太長，1024px已是極限，否則容易產(chǎn)生閱讀疲勞；3）在當(dāng)前的互聯(lián)網(wǎng)帶寬條件下，網(wǎng)頁難以采用大分辨率所要求的大尺寸圖片。

其次，網(wǎng)頁寬度會(huì)在780px-1260px的范圍內(nèi)，自動(dòng)變化，即最小不小于780px，最大不超過1280px。

最后，對(duì)于更大的分辨率，網(wǎng)頁內(nèi)容會(huì)自動(dòng)居中。

4.

下面就是CSS文件的寫法，只要4行。需要注意的是，這幾行的語句都針對(duì)整個(gè)頁面，即body標(biāo)簽或者最外層的那個(gè)div區(qū)域。

margin: 10px auto;

這一行保證了網(wǎng)頁在任何分辨率下，都會(huì)居中。

min-width: 780px;
max-width: 1260px;

這二行規(guī)定了網(wǎng)頁的最小和最大寬度。注意，IE6不支持這二行，即它們?cè)贗E6中是無效的。

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)查看這里。通過變動(dòng)瀏覽器窗口的大小，可以發(fā)現(xiàn)網(wǎng)頁在780px-1260px的范圍內(nèi)會(huì)自動(dòng)伸縮。

5.

最后，建議大家平時(shí)使用計(jì)算機(jī)的時(shí)候，不要盲目采用高分辨率，意義不大。

（完）