99久久精品免费观看国产_久久无码人妻一区二区三区_50岁熟妇的呻吟声对白_毛很浓密超多黑毛的少妇

具有靈(ling)活(huo)變(bian)動(dong)(dong)(dong)寬(kuan)(kuan)度(du)(du)(du)特性的(de)(de)(de)(de)(de)布局(ju)，也被稱為流式布局(ju)，這種布局(ju)會根據網頁瀏覽(lan)(lan)器的(de)(de)(de)(de)(de)窗(chuang)口大(da)小相應地調整(zheng)自己(ji)的(de)(de)(de)(de)(de)寬(kuan)(kuan)度(du)(du)(du)。在這類布局(ju)中，容器中的(de)(de)(de)(de)(de)主(zhu)體(ti)部分(fen)的(de)(de)(de)(de)(de)寬(kuan)(kuan)度(du)(du)(du)以(yi)當前(qian)瀏覽(lan)(lan)器的(de)(de)(de)(de)(de)窗(chuang)口寬(kuan)(kuan)度(du)(du)(du)為基準，按照一定(ding)的(de)(de)(de)(de)(de)百(bai)分(fen)比進行定(ding)義。當瀏覽(lan)(lan)器的(de)(de)(de)(de)(de)尺(chi)寸發生變(bian)化時，布局(ju)也發生變(bian)化，因為用(yong)戶調整(zheng)窗(chuang)口的(de)(de)(de)(de)(de)操作(zuo)已經改變(bian)了布局(ju)所依賴的(de)(de)(de)(de)(de)基準。換(huan)句話說(shuo)，這類布局(ju)中各區(qu)(qu)域(yu)的(de)(de)(de)(de)(de)寬(kuan)(kuan)度(du)(du)(du)會隨著(zhu)用(yong)戶瀏覽(lan)(lan)器窗(chuang)口的(de)(de)(de)(de)(de)調整(zheng)自動(dong)(dong)(dong)變(bian)化。所以(yi)，如果(guo)用(yong)戶覺得正(zheng)在瀏覽(lan)(lan)的(de)(de)(de)(de)(de)文章的(de)(de)(de)(de)(de)行寬(kuan)(kuan)不是很合適，通過簡(jian)單地調整(zheng)窗(chuang)口尺(chi)寸，內容區(qu)(qu)域(yu)就會自動(dong)(dong)(dong)進行調整(zheng)。

這類(lei)布(bu)(bu)局(ju)(ju)(ju)(ju)中，布(bu)(bu)局(ju)(ju)(ju)(ju)元(yuan)(yuan)素(su)之間的(de)(de)(de)(de)(de)關(guan)(guan)系至關(guan)(guan)重要，因(yin)為(wei)布(bu)(bu)局(ju)(ju)(ju)(ju)中子(zi)元(yuan)(yuan)素(su)的(de)(de)(de)(de)(de)寬(kuan)(kuan)度(du)是(shi)(shi)以父元(yuan)(yuan)素(su)的(de)(de)(de)(de)(de)百分比設(she)(she)置的(de)(de)(de)(de)(de)（不是(shi)(shi)相(xiang)鄰(lin)的(de)(de)(de)(de)(de)元(yuan)(yuan)素(su)）。例如(ru)，如(ru)果布(bu)(bu)局(ju)(ju)(ju)(ju)容器的(de)(de)(de)(de)(de)寬(kuan)(kuan)度(du)設(she)(she)置為(wei)90%（他的(de)(de)(de)(de)(de)父元(yuan)(yuan)素(su)為(wei)瀏覽器窗口），導(dao)航區的(de)(de)(de)(de)(de)寬(kuan)(kuan)度(du)設(she)(she)置為(wei)80%，那么導(dao)航區的(de)(de)(de)(de)(de)寬(kuan)(kuan)度(du)就(jiu)是(shi)(shi)瀏覽器寬(kuan)(kuan)度(du)的(de)(de)(de)(de)(de)72%（1×0.9×0.8=0.72）。由此可見(jian)，設(she)(she)計流式(shi)布(bu)(bu)局(ju)(ju)(ju)(ju)需要對設(she)(she)計的(de)(de)(de)(de)(de)結構有(you)深度(du)的(de)(de)(de)(de)(de)了解(jie)。對設(she)(she)計師而言，過(guo)程也許痛苦(ku)，但是(shi)(shi)成功的(de)(de)(de)(de)(de)設(she)(she)計會讓網站更加靈活地面對使用不同終端的(de)(de)(de)(de)(de)用戶[注釋]。

流式布局(ju)能夠(gou)盡可(ke)能多地使用(yong)瀏覽器的(de)(de)可(ke)用(yong)空(kong)間(jian)，設計師(shi)可(ke)以有足夠(gou)的(de)(de)空(kong)間(jian)來平均排(pai)布頁面中的(de)(de)內容(rong)。設計得(de)當(dang)的(de)(de)布局(ju)可(ke)以保(bao)持空(kong)白區域(yu)始終一(yi)致(zhi)，不管瀏覽器或者屏幕的(de)(de)分辨率(lv)如何(he)變化，這樣的(de)(de)設計顯(xian)得(de)更(geng)加一(yi)致(zhi)并且對用(yong)戶友好。同時，這類布局(ju)也消(xiao)除了低分辨率(lv)顯(xian)示器上(shang)刺眼的(de)(de)水平滾(gun)動條。

和(he)固定寬度布局不同，流式(shi)布局賦予用戶更(geng)大的自(zi)由來調整布局的寬度。

和固定寬度布局不同，流式布局賦予用戶更大的自由來調整布局的寬度。伴隨著這種自由，青島網站設計師將嚴格、一(yi)致的(de)像素布局轉移到(dao)一(yi)種更(geng)加靈活(huo)（也(ye)因(yin)此更(geng)有(you)風險(xian)）的(de)環境中來。這時對(dui)網站中特(te)定元(yuan)(yuan)素之間比例關(guan)系的(de)定義變得相當抽象和困難。這也(ye)正是(shi)多數設計師避免使(shi)用(yong)流式布局的(de)原因(yin)，這種布局剝奪了設計師在像素級精(jing)度上(shang)預測定位元(yuan)(yuan)素的(de)能力。

設計(ji)師在(zai)(zai)(zai)用(yong)相對值(zhi)(zhi)替代絕對值(zhi)(zhi)的(de)(de)過程中，經常將這些值(zhi)(zhi)進位或者去位（例如，將15.43333% 變成15.43% 或者15%），這樣設計(ji)就變得更加不精確 。最后的(de)(de)設計(ji)也(ye)許在(zai)(zai)(zai)一些低分辨率(lv)屏幕上表現良好，但是在(zai)(zai)(zai)高分辨率(lv)情況下會發生奇怪的(de)(de)現象，諸如布局中顯著的(de)(de)空白(bai)、內(nei)容區(qu)太寬(kuan)難以閱讀(du)等。

事實上(shang)，內容區過寬(kuan)的(de)(de)(de)(de)結果是流(liu)式布(bu)(bu)局最顯著的(de)(de)(de)(de)缺(que)點。由(you)于內容區的(de)(de)(de)(de)寬(kuan)度取(qu)決(jue)于用(yong)戶視(shi)窗的(de)(de)(de)(de)大(da)小，寬(kuan)屏的(de)(de)(de)(de)用(yong)戶會發現(xian)每一(yi)行都是如(ru)此的(de)(de)(de)(de)長，以至于閱讀(du)起來很不(bu)舒服(fu)。如(ru)果一(yi)個使用(yong)流(liu)式布(bu)(bu)局的(de)(de)(de)(de)頁面中(zhong)沒有這么多的(de)(de)(de)(de)文字，用(yong)戶將看到孤零零的(de)(de)(de)(de)一(yi)行字，側邊(bian)欄(lan)高得非常不(bu)協調，周邊(bian)還充(chong)斥著大(da)量的(de)(de)(de)(de)空白(bai)。

為了(le)獲得最佳的(de)(de)(de)閱讀效果（每(mei)行47 到(dao)86 個英文字母），設計師通常為內容區(qu) ;#content-block[注(zhu)釋]設置(zhi)在此基礎上加10% 的(de)(de)(de)寬(kuan)度(du)。除非設計的(de)(de)(de)可讀性會在低分辨(bian)率(lv)情況下變得很糟糕，一般不會設置(zhi)最小寬(kuan)度(du)。

在CSS 中，使用(yong)CSS 屬性“max-width”來定義布局的最大寬度。幾乎所有(you)

的主流瀏覽器都支持這個屬性（IE 7+、Firefox 1+、Safari 2+、Opera 9.2+），當然IE 除外。

為解決(jue)這個(ge)問(wen)題，設(she)計師(shi)通常(chang)會在內容區域設(she)置一(yi)個(ge)最大寬度，以此來將(jiang)布局(ju)限制到一(yi)個(ge)較為理想的寬度。

代(dai)碼(ma)(ma)檢查用(yong)(yong)戶相(xiang)對瀏覽器寬度的(de)(de)字體尺寸(cun)設置（以pt ;為(wei)單位(wei)）。Tofte 認為(wei)，不(bu)管在什么情況(kuang)下，使用(yong)(yong)默(mo)認12pt 的(de)(de)字體時，500px（像素）要比30em 寬，所(suo)以上面的(de)(de)代(dai)碼(ma)(ma)中使用(yong)(yong)了30em 作為(wei)布(bu)局的(de)(de)寬度。

其原理是，如果(guo)內容部分(fen)的寬(kuan)(kuan)度大于500 像素(su)與(yu)12 的比值(zhi)乘(cheng)以用戶字體(ti)的設置，就將寬(kuan)(kuan)度設置為30em。相反(fan)的情況(kuang)下，讓寬(kuan)(kuan)度保(bao)持自(zi)動（ 使用了(le)“auto”屬(shu)性） 。

由于(yu)動態樣式屬性沒有包含(han)在W3C 的CSS2 規范中，使(shi)用(yong)這種(zhong)方法會讓(rang)樣式表(biao)無(wu)法通過驗證。讀者可以根據自身情(qing)況使(shi)用(yong)，能夠為市場上仍然是最流行的瀏(liu)覽(lan)器提供(gong)帶有最小寬(kuan)度和最大寬(kuan)度的流式布局(ju)，付出這點代價也許(xu)是微不足道的。

Clearleft 山東網站制作就是使(shi)用了(le)自適應寬度布局(ju)的例子(zi)。下面兩幅圖展示了(le)網(wang)站在(zai)1280 和800 像(xiang)(xiang)素(su)情(qing)況下的表(biao)現(xian)。注意看(kan)內(nei)容區(qu)域是如何自動(dong)調整“We makewebsites better”這(zhe)句話(hua)的，在(zai)1280 像(xiang)(xiang)素(su)時的兩行(xing)變成(cheng)了(le)800 像(xiang)(xiang)素(su)時的三行(xing)。

在為自適(shi)(shi)應布局選擇一個合(he)(he)適(shi)(shi)的(de)(de)(de)(de)(de)(de)寬度(du)時(shi)，使用(yong)“width ：auto”或者其(qi)他的(de)(de)(de)(de)(de)(de)百分(fen)比值會非常(chang)合(he)(he)理，這樣確保(bao)了布局自動(dong)占據瀏(liu)覽器的(de)(de)(de)(de)(de)(de)可用(yong)空間。對于(yu)最(zui)(zui)小寬度(du)，可以使用(yong)像(xiang)素(su)值，例如760（像(xiang)素(su)）。這個限制(zhi)確保(bao)了所有自適(shi)(shi)應布局即使在最(zui)(zui)低(di)的(de)(de)(de)(de)(de)(de)分(fen)辨(bian)率情況下仍保(bao)持(chi)可讀。至于(yu)最(zui)(zui)大(da)寬度(du)，通(tong)常(chang)的(de)(de)(de)(de)(de)(de)做法(fa)是使用(yong)em 值（例如90em），這樣就能在文本寬度(du)不失控的(de)(de)(de)(de)(de)(de)情況下，保(bao)持(chi)不同分(fen)辨(bian)率情況下的(de)(de)(de)(de)(de)(de)穩定。讓人高(gao)興的(de)(de)(de)(de)(de)(de)是，如果(guo)用(yong)戶調整瀏(liu)覽器的(de)(de)(de)(de)(de)(de)字體(ti)設置，最(zui)(zui)大(da)寬度(du)會發生相應的(de)(de)(de)(de)(de)(de)變化。

一個(ge)經典的(de)計算(suan)這個(ge)比例(li)的(de)方法是，通過(guo)將給定像素(su)(su)高度元素(su)(su)與容器的(de)尺寸(cun)相(xiang)除得到(dao)的(de)字(zi)體大小（即(ji)上下文）。

在實現自適應布(bu)局時(shi)(shi)，我們使用了相(xiang)對(dui)值來(lai)表示外(wai)邊(bian)(bian)距(ju)和內(nei)邊(bian)(bian)距(ju)（當時(shi)(shi)，是相(xiang)對(dui)于視口(kou)的(de)寬度），這(zhe)樣(yang)當窗口(kou)尺(chi)(chi)(chi)寸(cun)變(bian)化(hua)(hua)時(shi)(shi)，外(wai)邊(bian)(bian)距(ju)和內(nei)邊(bian)(bian)距(ju)同樣(yang)發生變(bian)化(hua)(hua)，同時(shi)(shi)保持了比例和尺(chi)(chi)(chi)寸(cun)一直靈活。這(zhe)種技(ji)術(shu)被稱為“concertina padding”，由Richard Rutter 提出（“Web Standards Group ：Ten Questions for RichardRutter”, webstandardsgroup.org）。使用這(zhe)種技(ji)術(shu)后，當頁面尺(chi)(chi)(chi)寸(cun)改變(bian)時(shi)(shi)，外(wai)邊(bian)(bian)距(ju)和內(nei)邊(bian)(bian)距(ju)同樣(yang)發生變(bian)化(hua)(hua)，同時(shi)(shi)會檢查內(nei)容區以及文本行的(de)長度。