1、靜態(tài)布局

即傳統(tǒng)網(wǎng)頁(yè)設(shè)計(jì)模式，只需做一套尺寸的設(shè)計(jì)稿（比如1280*800px），一旦設(shè)備分辨率寬度小于1280px，則出現(xiàn)橫向滾動(dòng)條，一旦設(shè)備分辨率寬度大于1280px，則內(nèi)容居中顯示，兩邊留白。（常見(jiàn)于新聞?lì)?、電商類、政府類網(wǎng)頁(yè)），這種布局方式對(duì)設(shè)計(jì)師和前端而言是zui簡(jiǎn)單的。

2、自適應(yīng)布局

可以把自適應(yīng)布局看作是靜態(tài)布局的一個(gè)系列。自適應(yīng)布局的特點(diǎn)是為不同的屏幕分辨率定義固定布局，即創(chuàng)建多個(gè)靜態(tài)布局。一個(gè)靜態(tài)布局對(duì)應(yīng)一個(gè)屏幕分辨率，改變屏幕分辨率可以切換不同的靜態(tài)局部，但頁(yè)面元素不隨窗口大小的調(diào)整發(fā)生變化。簡(jiǎn)而言之就是需要自適應(yīng)幾個(gè)終端，就需要出幾套尺寸的設(shè)計(jì)稿。

3、彈性布局

以百分比作為頁(yè)面的基本單位，可以適應(yīng)一定范圍內(nèi)所有尺寸的設(shè)備屏幕及瀏覽器寬度，并能好利用有效空間展現(xiàn)zui佳效果。

4、混合式布局

混合式布局就是為不同終端設(shè)備的屏幕分辨率定義布局（適配各種尺寸的PC、手機(jī)、穿戴設(shè)備等等），在每個(gè)布局中，頁(yè)面元素隨著窗口調(diào)整而自動(dòng)適配，混合了百分比、像素為基本單位的組合方式。可以把混合式布局看作是彈性布局、自適應(yīng)布局的融合。簡(jiǎn)而言之就是只需要一套設(shè)計(jì)稿適應(yīng)多個(gè)終端。

自適應(yīng)布局、彈性布局、混合布局都是響應(yīng)式布局方式的一種。其中自適應(yīng)布局的實(shí)現(xiàn)成本zui低，但拓展性比較差；而彈性布局與混合布局效果都是比較理想的響應(yīng)式布局實(shí)現(xiàn)方式。很多時(shí)候，單一方式的布局響應(yīng)無(wú)法滿足理想效果，需要結(jié)合多種組合方式，但原則上盡可能是保持簡(jiǎn)單輕巧，而且同一斷點(diǎn)內(nèi)（發(fā)生布局改變的臨界點(diǎn)稱之為斷點(diǎn)）保持統(tǒng)一邏輯，否則頁(yè)面實(shí)現(xiàn)太過(guò)復(fù)雜也會(huì)影響整體體驗(yàn)和頁(yè)面性能。一般通欄、等分結(jié)構(gòu)的布局適合采用彈性布局方式，非等分的多欄結(jié)構(gòu)布局則需要采用混合布局的實(shí)現(xiàn)方式。

我所接觸的網(wǎng)站項(xiàng)目幾乎也都是響應(yīng)式開(kāi)發(fā)，顯然響應(yīng)式已成為網(wǎng)頁(yè)設(shè)計(jì)的標(biāo)配，而不是什么奢侈品。所以，牢牢掌握響應(yīng)式布局設(shè)計(jì)規(guī)范也是ji為必要的。

文章名稱：網(wǎng)頁(yè)設(shè)計(jì)中網(wǎng)頁(yè)布局的主要方式有哪些
當(dāng)前URL：http://jinyejixie.com/news/132873.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計(jì)、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站策劃、用戶體驗(yàn)、網(wǎng)站排名、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)