html5自適應頁面布局的方法

這篇文章主要講解了“html5自適應頁面布局的方法”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“html5自適應頁面布局的方法”吧！

　　一、靜態布局(Static Layout)

　　網頁上的所有元素的尺寸一律使用px作為單位。

　　1、布局特點

　　不管瀏覽器尺寸具體是多少，網頁布局始終按照最初寫代碼時的布局來顯示。

　　常規的pc的網站都是靜態(定寬度)布局的，也就是設置了min-width，這樣的話。

　　如果小于這個寬度就會出現滾動條，如果大于這個寬度則內容居中外加背景，這種設計常見與pc端。

　　2、設計方法

　　PC：居中布局，所有樣式使用絕對寬度/高度(px)，設計一個Layout，在屏幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分；

　　移動設備：另外建立移動網站，單獨設計一個布局，使用不同的域名如wap.或m.。

　　在移動端開發中采用靜態布局的兩種方式：

　　(1)在viewport meta標簽上設置width=320，頁面的各個元素也采用px作為單位。通過用JS動態修改標簽的initial-scale使得頁面等比縮放，從而剛好占滿整個屏幕。(見前端開發-web app變革之rem)

　　(2)設在viewport meta標簽上設置content"width=640,user-scalable=no，頁面的各個元素也采用px作為單位。由于640px超出了手機寬度，瀏覽器會自動縮小頁面至剛好全屏。

　　優點：這種布局方式對設計師和CSS編寫者來說都是最簡單的，亦沒有兼容性問題。

　　缺點：顯而易見，即不能根據用戶的屏幕尺寸做出不同的表現。

　　當前，大部分門戶網站、大部分企業的PC宣傳站點都采用了這種布局方式。固定像素尺寸的網頁是匹配固定像素尺寸顯示器的最簡單辦法。但這種方法不是一種完全兼容未來網頁的制作方法，We需要一些適應未知設備的方法。

　　二、流式布局(Liquid Layout)

　　流式布局(Liquid)的特點(也叫"Fluid") 是頁面元素的寬度按照屏幕分辨率進行適配調整，但整體布局不變。

　　網頁中主要的劃分區域的尺寸使用百分數(搭配min-*、max-*屬性使用)，例如，設置網頁主體的寬度為80%，min-width為960px。圖片也作類似處理(width:100%, max-width一般設定為圖片本身的尺寸，防止被拉伸而失真)。

　　1、布局特點：屏幕分辨率變化時，頁面里元素的大小會變化而但布局不變。【這就導致如果屏幕太大或者太小都會導致元素無法正常顯示】

　　2、設計方法：使用%百分比定義寬度，高度大都是用px來固定住，可以根據可視區域 (viewport) 和父元素的實時尺寸進行調整，盡可能的適應各種分辨率。往往配合 max-width/min-width 等屬性控制尺寸流動范圍以免過大或者過小影響閱讀。

　　這種布局方式在Web前端開發的早期歷史上，用來應對不同尺寸的PC屏幕(那時屏幕尺寸的差異不會太大)，在當今的移動端開發也是常用布局方式，但缺點明顯：主要的問題是如果屏幕尺度跨度太大，那么在相對其原始設計而言過小或過大的屏幕上不能正常顯示。因為寬度使用%百分比定義，但是高度和文字大小等大都是用px來固定，所以在大屏幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長，但是高度、文字大小還是和原來一樣(即，這些東西無法變得“流式”)，顯示非常不協調。

　　三、自適應布局(Adaptive Layout)

　　自適應布局的特點是分別為不同的屏幕分辨率定義布局，即創建多個靜態布局，每個靜態布局對應一個屏幕分辨率范圍。改變屏幕分辨率可以切換不同的靜態局部(頁面元素位置發生改變)，但在每個靜態布局中，頁面元素不隨窗口大小的調整發生變化。可以把自適應布局看作是靜態布局的一個系列。

　　1、布局特點：屏幕分辨率變化時，頁面里面元素的位置會變化而大小不會變化。

　　2、設計方法：使用 @media 媒體查詢給不同尺寸和介質的設備切換不同的樣式。在優秀的響應范圍設計下可以給適配范圍內的設備最好的體驗，在同一個設備下實際還是固定的布局。

　　四、響應式布局(Responsive Layout)

　　隨著CSS3出現了媒體查詢技術，又出現了響應式設計的概念。響應式設計的目標是確保一個頁面在所有終端上(各種尺寸的PC、手機、手表、冰箱的Web瀏覽器等等)都能顯示出令人滿意的效果，對CSS編寫者而言，在實現上不拘泥于具體手法，但通常是糅合了流式布局+彈性布局，再搭配媒體查詢技術使用。——分別為不同的屏幕分辨率定義布局，同時，在每個布局中，應用流式布局的理念，即頁面元素寬度隨著窗口調整而自動適配。即：創建多個流體式布局，分別對應一個屏幕分辨率范圍。可以把響應式布局看作是流式布局和自適應布局設計理念的融合。

　　響應式幾乎已經成為優秀頁面布局的標準。

　　1、布局特點：每個屏幕分辨率下面會有一個布局樣式，即元素位置和大小都會變。

　　2、設計方法：媒體查詢+流式布局。通常使用 @media 媒體查詢和網格系統 (Grid System) 配合相對布局單位進行布局，實際上就是綜合響應式、流動等，上述技術通過CSS給單一網頁不同設備返回不同樣式的技術統稱。

　　優點：適應pc和移動端，如果足夠耐心，效果完美。

　　缺點：(1)媒體查詢是有限的，也就是可以枚舉出來的，只能適應主流的寬高。(2)要匹配足夠多的屏幕大小，工作量不小，設計也需要多個版本。

　　分別為不同的屏幕分辨率定義布局，同時，在每個布局中，應用流式布局的理念，即頁面元素寬度隨著窗口調整而自動適配。

　　可以把響應式布局看作是流式布局和自適應布局設計理念的融合。

感謝各位的閱讀，以上就是“html5自適應頁面布局的方法”的內容了，經過本文的學習后，相信大家對html5自適應頁面布局的方法這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！