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

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

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

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