布局類型有4種:
- 固定寬度布局
- 流體布局
- 彈性布局
- 混合布局
固定寬度布局
在固定布局中,網頁的寬度是必須指定為一個像素值,一般設為960像素。在過去,開發人員發現960像素是最適合作為網格布局的寬度,因為960可以整除3,4,5,6,8,10,12和15。
儘管到了今天,在web開發中還是比較普遍使用固定寬度布局的,原因是這種布局提供很強的穩定性與可控性。如果你知道你的網頁寬度,就可以兼容所有瀏覽器與設備,你可以精確地控制圖像位置,就好像一切盡在掌控之中。
然而,固定寬度布局固然有些劣勢,在前面的文章也提到,想創建一個固定寬度布局網站的開發人員必須意識到網站是否可以在各式各樣的屏幕,瀏覽器和設備中可用與可見地顯示出來。現在市場上出現如此眾多設備,意味著有各式各樣的屏幕尺寸,對開發人員提出了「一種尺寸適應所有」的技術挑戰,這種挑戰已超越了固定寬度設計的精確度和可控制性。
固定寬度的網站出錯的一個常見例子就是小於960像素的屏幕尺寸是非常常見的。這樣網站就不能夠全屏顯示了,你將看到一條水平的導航條。事實上,這些小屏幕通常用手指操作,而不是滑鼠來控制。
即使當屏幕尺寸大於960像素,還是會出現其他的問題。例如,網頁會被一大片無內容空白包圍著,很明顯,開發人員不會選擇固定寬度布局應用在大屏幕尺寸上。開發人員和用戶寧願做出更多寬度版本來。
流體布局(自適應布局)
流布局與固定寬度布局基本不同點就在於對網站尺寸的測量單位不同。固定寬度布局使用的是像素,但是流布局使用的是百分比,看到百分比,你應該想到,這將提供了很強的可塑性和流動性。換句話說,通過設置了百分比,你將不需要考慮設備尺寸或者屏幕寬度大小了,結論就是,你可以為每種情形找到一種可行的方案,因為你的設計尺寸將適應所有的設備尺寸。
流布局與媒體查詢和優化樣式技術的關係密切。單純的基於百分比寬度是不足以在一個大屏幕中實現你設計。稍後我們將學到如何得到一個完美的流布局。
彈性布局
彈性布局跟流布局很相像,主要不同是大小單位。彈性布局的大小單位不是像素或者百分比,而是em。
一個em
單位等於定義在CSS規則:font-size
的值大小。例如,我們設置文本的font-size
大小為20像素,那麼1em
就等於20px
,2em
就等於40px
,以此類推。
在CSS中像素
px
和em
之間的轉換計算是一門科學,並不像上面這說得這麼簡單。如果你想詳細了解兩者之間的轉換,可以閱讀早前的文章《CSS中強大的EM》。——@大漠
這種布局為開發人員提供了一種很強的排版控制。由於絕大多數的布局主要由文本來填充,此方案使彈性布局成為許多項目的強有力的競爭者。然而,還是存在缺點就是在某些例子中依然出現令人不愉快的水平滾動條。
混合布局
最後介紹這個混合布局,是上面介紹的兩種或者更多布局類型的組合。例如,開發人員可能需要設置某些指定元素(側欄或者底部)一個固定寬度,剩下的就選擇百分比或者em。
明顯地,這種途徑還是有劣勢——如果你是指側欄的寬度為200像素,然後為剩下的內容設置為80%的寬度,當屏幕小於1000像素時,你將會看到一條水平滾動條,因為主要的列已經沒有足夠空間容納了。現實中很少情況,在你的項目只會有一個元素。但是你可以很容易地解決這些問題,後面我們將會學習到。
總結
你可能想知道什麼是最好的解決方案?上面列出的四種類型布局哪種才是最適合作為響應式解決方案。你或許已經猜到,每個布局類型都有其優點和缺點。這一切都取決於你的需求和項目的特點。
這或者很容易致使你認為,這些布局之一都是普遍比其他的優秀的,但不能認為它們之間是互斥關係或是競爭對手。相反地,應該考慮技術,可以結合使用。許多這些技術不可能獨立於其他技術而存在的。例如,如果沒有定義固定字體大小,em就是沒有意義的。同樣,如果沒有精確寬度來適應流行的屏幕尺寸,媒體查詢也將是無意義的。
著作權歸作者所有。
商業轉載請聯繫作者獲得授權,非商業轉載請註明出處。
原文: https://www.w3cplus.com/responsive/responsive-web-design-fluid-layouts.html © w3cplus.com