html5自適應(yīng)頁面布局的方法

這篇文章主要講解了“html5自適應(yīng)頁面布局的方法”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“html5自適應(yīng)頁面布局的方法”吧！

　　一、靜態(tài)布局(Static Layout)

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

　　1、布局特點(diǎn)

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

　　常規(guī)的pc的網(wǎng)站都是靜態(tài)(定寬度)布局的，也就是設(shè)置了min-width，這樣的話。

　　如果小于這個(gè)寬度就會(huì)出現(xiàn)滾動(dòng)條，如果大于這個(gè)寬度則內(nèi)容居中外加背景，這種設(shè)計(jì)常見與pc端。

　　2、設(shè)計(jì)方法

　　PC：居中布局，所有樣式使用絕對(duì)寬度/高度(px)，設(shè)計(jì)一個(gè)Layout，在屏幕寬高有調(diào)整時(shí)，使用橫向和豎向的滾動(dòng)條來查閱被遮掩部分；

　　移動(dòng)設(shè)備：另外建立移動(dòng)網(wǎng)站，單獨(dú)設(shè)計(jì)一個(gè)布局，使用不同的域名如wap.或m.。

　　在移動(dòng)端開發(fā)中采用靜態(tài)布局的兩種方式：

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

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

　　優(yōu)點(diǎn)：這種布局方式對(duì)設(shè)計(jì)師和CSS編寫者來說都是最簡(jiǎn)單的，亦沒有兼容性問題。

　　缺點(diǎn)：顯而易見，即不能根據(jù)用戶的屏幕尺寸做出不同的表現(xiàn)。

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

　　二、流式布局(Liquid Layout)

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

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

　　1、布局特點(diǎn)：屏幕分辨率變化時(shí)，頁面里元素的大小會(huì)變化而但布局不變。【這就導(dǎo)致如果屏幕太大或者太小都會(huì)導(dǎo)致元素?zé)o法正常顯示】

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

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

　　三、自適應(yīng)布局(Adaptive Layout)

　　自適應(yīng)布局的特點(diǎn)是分別為不同的屏幕分辨率定義布局，即創(chuàng)建多個(gè)靜態(tài)布局，每個(gè)靜態(tài)布局對(duì)應(yīng)一個(gè)屏幕分辨率范圍。改變屏幕分辨率可以切換不同的靜態(tài)局部(頁面元素位置發(fā)生改變)，但在每個(gè)靜態(tài)布局中，頁面元素不隨窗口大小的調(diào)整發(fā)生變化。可以把自適應(yīng)布局看作是靜態(tài)布局的一個(gè)系列。

　　1、布局特點(diǎn)：屏幕分辨率變化時(shí)，頁面里面元素的位置會(huì)變化而大小不會(huì)變化。

　　2、設(shè)計(jì)方法：使用 @media 媒體查詢給不同尺寸和介質(zhì)的設(shè)備切換不同的樣式。在優(yōu)秀的響應(yīng)范圍設(shè)計(jì)下可以給適配范圍內(nèi)的設(shè)備最好的體驗(yàn)，在同一個(gè)設(shè)備下實(shí)際還是固定的布局。

　　四、響應(yīng)式布局(Responsive Layout)

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

　　響應(yīng)式幾乎已經(jīng)成為優(yōu)秀頁面布局的標(biāo)準(zhǔn)。

　　1、布局特點(diǎn)：每個(gè)屏幕分辨率下面會(huì)有一個(gè)布局樣式，即元素位置和大小都會(huì)變。

　　2、設(shè)計(jì)方法：媒體查詢+流式布局。通常使用 @media 媒體查詢和網(wǎng)格系統(tǒng) (Grid System) 配合相對(duì)布局單位進(jìn)行布局，實(shí)際上就是綜合響應(yīng)式、流動(dòng)等，上述技術(shù)通過CSS給單一網(wǎng)頁不同設(shè)備返回不同樣式的技術(shù)統(tǒng)稱。

　　優(yōu)點(diǎn)：適應(yīng)pc和移動(dòng)端，如果足夠耐心，效果完美。

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

　　分別為不同的屏幕分辨率定義布局，同時(shí)，在每個(gè)布局中，應(yīng)用流式布局的理念，即頁面元素寬度隨著窗口調(diào)整而自動(dòng)適配。

　　可以把響應(yīng)式布局看作是流式布局和自適應(yīng)布局設(shè)計(jì)理念的融合。

感謝各位的閱讀，以上就是“html5自適應(yīng)頁面布局的方法”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)html5自適應(yīng)頁面布局的方法這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！