創(chuàng)造100% 自適應(yīng)css布局的行之有效的方法

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

從上述簡單的布局中,我們可以看到如何在css中規(guī)劃代碼。960px是我們的固定寬度,對于任何小于該尺寸的分辨率屏幕,我們將迫使水平滾動條出現(xiàn)。所有內(nèi)容在一個880px的wrapper里,在左右兩側(cè)有40 px的margin,元素間有20px的間距。
在我們思考其可用性之前,一切安好。這種類型的布局可能適合很多用戶,但未必適合每一個人。因此,我們將其轉(zhuǎn)換成流動布局,如果欲使這一布局在任何分辨率下保持其比例,我們必須將960px的寬度改為100%,然后計算出與880px、640px、200px等值的百分比。
這需要一些理性思考,在我們模擬的固定寬度設(shè)計中,在960px的設(shè)計中,整個wrapper是880px,如果需要與其等價的百分比,我們所要做的是相除。
800pixels / 960pixels = 0.91667
采用十進(jìn)制,將其轉(zhuǎn)換成百分比,得到的是91.6667%。因為當(dāng)前瀏覽器處理百分比的差異,它不會很明智的將所有小數(shù)位數(shù)應(yīng)用到布局之中,瀏覽器要么向上取,要么向下舍。因此,我們需要一個整數(shù),既然它更接近于92%,我們就向上取,稍后因為額外間隙的存在,我們需要向下舍,這很容易做到。
#wrapper {
width: 92%;
}
對于content和sidebar區(qū)域,我們?nèi)绶ㄅ谥?,但需保持正確的比例。因為這個區(qū)域在880px的wrapper內(nèi),我們需要找到相對于這個區(qū)域的百分比。
640 pixels ÷ 880 pixels = 0.727272 › 73%
220 pixels ÷ 880 pixels = 0.25 › 25%
width: 73%;
}
#sidebar {
width: 25% ;
6.}
我們將實際內(nèi)容區(qū)域的寬度降至72%,這樣我們的布局就不會破壞。因為它位于導(dǎo)航欄的旁邊,我們不希望它太寬。

在處理流動設(shè)計的比例時,這是一個非常簡單的概念,也是更有效的處理方式。借助于這樣的技巧,設(shè)計者沒有理由說不能保持其比例,美觀的布局被破壞。
關(guān)于margin
設(shè)計者可以用不同的方法處理margin,一種方法是計算margin的百分比(此例中為200px/880px);另外一種是設(shè)置固定的margin,在我們的例子中,硬性大小為20px。
兩種方法各有優(yōu)劣,margin使用百分比,設(shè)計師承擔(dān)者在大分辨率屏幕下margin太大的風(fēng)險但能保持完好的比例。用固定的margin在比例的保持上有輕微的缺陷,但是,無論屏幕分辨率為多大,margin將維持不變。
相關(guān)文章
- 小編今天為大家介紹一篇HTML自適應(yīng)表格的方法,希望對大家有所幫助。2013-04-03
css 圖片自適應(yīng)寬度 CSS實現(xiàn)控制圖片自適應(yīng)顯示寬度代碼
由于用戶上傳的圖片太大自己又不去調(diào)解,導(dǎo)致展示的時候圖片太大撐開了,直接影響了界面的美觀度,于是想使用css屬性嘗試控制下:給圖片設(shè)置顯示最大的寬度,還好Firefox/Ope2013-02-06左定寬度右自適應(yīng)寬度并且等高布局實現(xiàn)代碼
左側(cè)固定寬,右側(cè)自適應(yīng)屏幕寬;左右兩列,等高布局;左右兩列要求有最小高度,例如:200px;(當(dāng)內(nèi)容超出200時,會自動以等高的方式增高)要求不用JS或CSS行為實現(xiàn),那么下面2012-12-24display:table-cell實現(xiàn)兼容性的兩欄自適應(yīng)布局實現(xiàn)代碼
display:table-cell實現(xiàn)兼容性的兩欄自適應(yīng)布局,需要的朋友可以參考下2012-12-07網(wǎng)頁設(shè)計技巧:iframe自適應(yīng)高度的問題
所謂iframe自適應(yīng)高度,就是,基于界面美觀和交互的考慮,隱藏了iframe的border和scrollbar,讓人看不出它是個iframe2012-11-12- 寬度自適應(yīng):就是元素的寬度根居里面的內(nèi)容來變化2012-06-14
Button在IE6、7下的自適應(yīng)寬度問題解決方法
很早就遇到過這么個小問題,但由于其并未影響到實際作用和美觀就沒有正面解決它,現(xiàn)在,我們來試著解決它2012-02-23div模擬textarea文本域?qū)崿F(xiàn)高度自適應(yīng)效果代碼
textarea標(biāo)簽為表單元素,一般用在多行文字的輸入。在web應(yīng)用上常見的是評論輸入框,微博信息輸入框等。2010-12-27- div完美自適應(yīng)動態(tài)上下左右居中,多用于信息提示框效果。2010-08-10
CSS min-height IE6、IE7、FF下DIV自適應(yīng)高度
IE6、IE7、FF下DIV自適應(yīng)高度2010-05-13