流動(dòng)網(wǎng)頁(yè)設(shè)計(jì)有很多好處，但也只有在正確使用的時(shí)候。合適的技巧會(huì)使頁(yè)面在大屏幕、小屏幕抑、PDA小屏幕上都能得到良好的呈現(xiàn)。但是，糟糕的代碼結(jié)構(gòu)，對(duì)于流動(dòng)布局來(lái)說(shuō)將是災(zāi)難性的。因此，我們需要針對(duì)大多數(shù)流動(dòng)設(shè)計(jì)的缺點(diǎn)尋求可行的解決方案。
　　如果你作為設(shè)計(jì)師通過(guò)額外的付出創(chuàng)造了一個(gè)功能性流動(dòng)布局，為什么不更進(jìn)一步使其兼容所有分辨率，而不是局限于大多數(shù)屏幕。你可以使用一些技巧創(chuàng)造一種意想不到的適應(yīng)性布局，這種布局在不斷改變屏幕分辨率情況下會(huì)保持功能上的完整性。
　　在這篇文章，我們將討論創(chuàng)造100%功能自適應(yīng)css布局的行之有效的方法
　　一、使用網(wǎng)格的流動(dòng)布局
　　我們大多數(shù)人都聽(tīng)說(shuō)過(guò)設(shè)計(jì)固定寬度網(wǎng)頁(yè)的 960網(wǎng)格系統(tǒng) ，使用960網(wǎng)格系統(tǒng)使得固定寬度的設(shè)計(jì)比流動(dòng)布局更可取。但是，有一種方法可以創(chuàng)建一個(gè)基于網(wǎng)格的彈性布局。從技術(shù)上講，彈性布局的代碼結(jié)構(gòu)不同于流動(dòng)布局，但它為用戶提供的幾乎是相同的效果。
　　什么是流動(dòng)布局?
　　流動(dòng)網(wǎng)格是通過(guò)智能的使用div、百分比和簡(jiǎn)單的數(shù)學(xué)計(jì)算來(lái)創(chuàng)建的。這種理念來(lái)自于Ethan Marcotte ，他認(rèn)識(shí)到“em”比字體大小進(jìn)步。我們?cè)谶@重溫這個(gè)基本概念，但要對(duì)該方法有一個(gè)全面而詳細(xì)的了解，請(qǐng)參閱“流動(dòng)網(wǎng)格”，這是一篇全面的關(guān)于建立基于網(wǎng)格的彈性布局的教程。
　　其理念是使用相對(duì)尺寸、結(jié)合百分比和em，用簡(jiǎn)單的分割以找到相對(duì)應(yīng)的像素寬度，而這些寬度是在固定寬度設(shè)計(jì)中使用的。
　　優(yōu)點(diǎn)：
　　這種方法使你擁有一個(gè)網(wǎng)格布局，這看起來(lái)可能僅固定一次寬度;
　　用戶可以使用預(yù)設(shè)的字體大小查看這個(gè)布局，并且保持其比例大小;
　　布局樣式跨瀏覽器兼容;
　　一旦理解之后，流動(dòng)設(shè)計(jì)中的大多數(shù)問(wèn)題將容易修復(fù)。
如何讓創(chuàng)建一個(gè)流動(dòng)布局?

　　創(chuàng)建流動(dòng)布局的第一步是創(chuàng)建一個(gè)首選的固定寬度的模擬，這樣一來(lái)，設(shè)計(jì)師能看到其比例，然后使用神圣的比例、平衡和合適的間距技巧。

　　

 

　　從上述簡(jiǎn)單的布局中，我們可以看到如何在css中規(guī)劃代碼。960px是我們的固定寬度，對(duì)于任何小于該尺寸的分辨率屏幕，我們將迫使水平滾動(dòng)條出現(xiàn)。所有內(nèi)容在一個(gè)880px的wrapper里，在左右兩側(cè)有40 px的margin，元素間有20px的間距。

　　在我們思考其可用性之前，一切安好。這種類型的布局可能適合很多用戶，但未必適合每一個(gè)人。因此，我們將其轉(zhuǎn)換成流動(dòng)布局，如果欲使這一布局在任何分辨率下保持其比例，我們必須將960px的寬度改為100%，然后計(jì)算出與880px、640px、200px等值的百分比。

　　這需要一些理性思考，在我們模擬的固定寬度設(shè)計(jì)中，在960px的設(shè)計(jì)中，整個(gè)wrapper是880px，如果需要與其等價(jià)的百分比，我們所要做的是相除。

　　800pixels / 960pixels = 0.91667

　　采用十進(jìn)制，將其轉(zhuǎn)換成百分比，得到的是91.6667%。因?yàn)楫?dāng)前瀏覽器處理百分比的差異，它不會(huì)很明智的將所有小數(shù)位數(shù)應(yīng)用到布局之中，瀏覽器要么向上取，要么向下舍。因此，我們需要一個(gè)整數(shù)，既然它更接近于92%，我們就向上取，稍后因?yàn)轭~外間隙的存在，我們需要向下舍，這很容易做到。

　　#wrapper {

　　width: 92%;

　　}

　　對(duì)于content和sidebar區(qū)域，我們?nèi)绶ㄅ谥疲璞３终_的比例。因?yàn)檫@個(gè)區(qū)域在880px的wrapper內(nèi)，我們需要找到相對(duì)于這個(gè)區(qū)域的百分比。

　　640 pixels ÷ 880 pixels = 0.727272 › 73%

　　220 pixels ÷ 880 pixels = 0.25 › 25%

　　width: 73%;

　　}

　　#sidebar {

　　width: 25% ;

　　6.}

　　我們將實(shí)際內(nèi)容區(qū)域的寬度降至72%，這樣我們的布局就不會(huì)破壞。因?yàn)樗挥趯?dǎo)航欄的旁邊，我們不希望它太寬。

　　

 

　　在處理流動(dòng)設(shè)計(jì)的比例時(shí)，這是一個(gè)非常簡(jiǎn)單的概念，也是更有效的處理方式。借助于這樣的技巧，設(shè)計(jì)者沒(méi)有理由說(shuō)不能保持其比例，美觀的布局被破壞。

　　關(guān)于margin

　　設(shè)計(jì)者可以用不同的方法處理margin，一種方法是計(jì)算margin的百分比(此例中為200px/880px);另外一種是設(shè)置固定的margin，在我們的例子中，硬性大小為20px。

　　兩種方法各有優(yōu)劣，margin使用百分比，設(shè)計(jì)師承擔(dān)者在大分辨率屏幕下margin太大的風(fēng)險(xiǎn)但能保持完好的比例。用固定的margin在比例的保持上有輕微的缺陷，但是，無(wú)論屏幕分辨率為多大，margin將維持不變。

最新評(píng)論