正文

網(wǎng)頁頁面布局（網(wǎng)頁頁面布局結(jié)構(gòu)分為）

發(fā)布時間：2023-04-18 22:14:55 稿源：創(chuàng)意嶺閱讀： 97

大家好！今天讓創(chuàng)意嶺的小編來大家介紹下關(guān)于網(wǎng)頁頁面布局的問題，以下是小編對此問題的歸納整理，讓我們一起來看看吧。

開始之前先推薦一個非常厲害的Ai人工智能工具，一鍵生成原創(chuàng)文章、方案、文案、工作計劃、工作報告、論文、代碼、作文、做題和對話答疑等等

只需要輸入關(guān)鍵詞，就能返回你想要的內(nèi)容，越精準(zhǔn)，寫出的就越詳細，有微信小程序端、在線網(wǎng)頁版、PC客戶端

官網(wǎng)：https://ai.de1919.com。

創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀的企業(yè)，服務(wù)客戶遍布全球各地，如需了解SEO相關(guān)業(yè)務(wù)請撥打電話175-8598-2043，或添加微信：1454722008

本文目錄:

1、頁面布局方案
2、網(wǎng)頁布局設(shè)計有哪些類型?
3、網(wǎng)頁版面布局有幾種？
4、網(wǎng)頁設(shè)計應(yīng)該如何布局

網(wǎng)頁頁面布局（網(wǎng)頁頁面布局結(jié)構(gòu)分為）

一、頁面布局方案

例如：對于DPR=2的Retina屏幕而言1個位圖像素對應(yīng)于4個物理像素，由于單一位圖像素不可再分割，所以只能就近取色，從而導(dǎo)致圖片模糊。所以對于圖片清晰度問題，較好的方案是提供兩倍圖 @x2 。

像素密度表示設(shè)備屏幕能夠顯示的設(shè)備獨立像素DIP的數(shù)量，屏幕顯示的像素數(shù)量越多畫面也就越精細，同時同樣屏幕區(qū)域能夠顯示的信息也就越多。

屏幕由像素點組成，每個像素點發(fā)出不同顏色的光，進而構(gòu)成界面。而屏幕的物理尺寸與像素尺寸是不成比例的。不同尺寸的手機屏幕擁有不同的分辨率，分辨率實際上是手機像素的寬高尺寸。

像素密度（pixels per inch,PPI或DPI）表示每英寸長度上排列的設(shè)備獨立像素點DIP的個數(shù)，1英寸等于2.53厘米。像素密度PPI越高則表示屏幕分辨率越高進而屏幕顯示越精細。Retine屏幕比普通屏幕清晰的原因，是因為它的像素密度是普通屏幕的數(shù)倍。

例如：3.5英寸的iPhone手機屏幕

日常所說的屏幕尺寸，實際是指屏幕對角線的長度。計算像素密度首先需要計算設(shè)備屏幕對角線等效像素，然后除以對角線長度。例如HTC G7分辨率為480x800，3.7英寸，計算出像素密度為252PPI。

像素密度PPI = 平方像素寬加平方像素高之和開平方的結(jié)果，再除以屏幕對角線的英寸數(shù)。

密度決定比例

通過計算像素密度PPI可以得知設(shè)備屏幕屬于哪個密度區(qū)間，因為不同密度區(qū)間對應(yīng)著不同的默認縮放比例。

通俗來說視區(qū) Viewport 就是瀏覽器上用來顯示頁面的區(qū)域，也就是說，瀏覽器的實際寬度和手機寬度不一樣，無論手機寬度是320px或640px，在手機瀏覽器內(nèi)部寬度始終會是瀏覽器本身的視區(qū)。

現(xiàn)代瀏覽器都會給自身的視區(qū)提供一個默認值，大多會以980px或1024px為主。在移動端視區(qū)默認一般來說是會大于手機屏幕的，所以當(dāng)在桌面瀏覽器正常顯示的頁面，會以960px設(shè)計主區(qū)域。放到移動端就會出現(xiàn)橫向滾動條，因此會專門會給瀏覽器設(shè)計移動端的頁面。

移動端瀏覽器會將頁面放在一個虛擬的窗口 viewport 中，通常這個虛擬的窗口會比屏幕寬，這樣就不用將每個頁面擠到很小的窗口中，以防止破壞沒有針對手機瀏覽器優(yōu)化的網(wǎng)頁布局，用戶可以通過平移或縮放來查看頁面中的不同部分。

頁面中視區(qū) viewport 是可繪制的區(qū)域，雖然視區(qū)的可視面積和屏幕尺寸相匹配，但視區(qū)頁由自己的尺寸，用來確定頁面中的像素數(shù)量。

在 iPhone 和 Android 平臺中 WebKit 內(nèi)核的歷覽器使用980像素寬的視見區(qū)或邏輯尺寸，相當(dāng)于viewport中的width=980px。當(dāng)頁面加載后，頁面內(nèi)容通常被完全縮放以便整個頁面都可見，盡管內(nèi)容會被縮放的非常小且不可讀。

在Web頁面中，可通過JS動態(tài)獲取相關(guān)參數(shù)。

根據(jù)目前市場主流移動終端，統(tǒng)計設(shè)備獨立像素后，移動端H5設(shè)計稿推薦尺寸為640 x 1136、750 x 1334。

除去瀏覽器全屏顯示，幾乎所有情況下均會存在頂部狀態(tài)欄和導(dǎo)航欄。根據(jù)iPhone標(biāo)準(zhǔn)，狀態(tài)欄和導(dǎo)航欄的獨立像素高度分別為40px和88px。Android平臺可以更改狀態(tài)和導(dǎo)航欄高度可取默認值48px和100px為準(zhǔn)。在網(wǎng)頁中就會將頁面內(nèi)容向下擠入盲區(qū)，根據(jù)不同的布局方式可能會擠出視口，也就是可視區(qū)域之下。因此取兩個平臺的最大值148。因此設(shè)計稿要盡量保證單頁下沒有重要內(nèi)容。如果要在所有屏幕上將重要內(nèi)容顯示完全，需要注意市面上存在的小尺寸屏幕，絕對部分智能機分辨率在640 x 960之上，因此只要重要內(nèi)容放在盲區(qū)之上即可。計算出的最安全高度為812 = 960 - 148。

簡單來說視區(qū) Viewport 是嚴(yán)格等于瀏覽器的窗口，在桌面瀏覽器中視區(qū)就是瀏覽器窗口的寬高，但在移動設(shè)備上由于視區(qū)太窄，為了更好的為 CSS 布局服務(wù)，所以提供了兩個視區(qū)，分別是可見視區(qū) Visual Viewport 和布局視區(qū) Layout Viewport 。

如果將移動設(shè)備瀏覽器的可視區(qū)域設(shè)置為Viewport，某些網(wǎng)站會因為Viewport太窄而顯示錯亂，所以瀏覽器會默認將Viewport設(shè)置為一個較寬的值，比如980px，使得為桌面瀏覽器設(shè)計的網(wǎng)站也能在移動設(shè)備瀏覽器上正常顯示。這個瀏覽器默認的Viewport也就是Layout Viewport布局視區(qū)。布局視區(qū)的寬度可以使用JavaScript的 document.documentElement.clientWidth 獲取。移動設(shè)備中默認的視區(qū)就是Layout Viewport。

布局視區(qū)的寬度是大于瀏覽器可視區(qū)域的寬度的，因此需要一個Viewport來表示瀏覽器可視區(qū)域大小，這個Viewport也就是可見視區(qū)Visual Viewport，可見視區(qū)可使用JavaScript的 document.documentElement.innerWidth 獲取。

Ideal Viewport是一個能完美適配移動設(shè)備的Viewport，首先無需縮放和橫向滾動條就能正常查看頁面所有內(nèi)容，其次顯示的文字、圖片大小合適。比如14px的文本不會因為一個高密度像素的屏幕而顯示的太小或無法看清。無論在何種密度屏幕、何種分辨率下，顯示出來的大小都差不多，這個Viewport也就是Ideal Viewport。

Ideal Viewport并沒有一個固定的尺寸，不同的設(shè)備擁有不同的尺寸。比如在IPhone設(shè)備中Ideal Viewport寬度是320px，無論屏幕寬度是320還是640的。Ideal Viewport的意義在于，無論在何種分辨率下，針對Ideal Viewport而設(shè)計的頁面無需縮放和橫向滾動條都可以完美地呈現(xiàn)給用戶。

移動設(shè)備中默認的視區(qū)是Layout Viewport，在進行移動設(shè)備頁面開發(fā)時則需要Ideal Viewport。要得到完美視區(qū)，需設(shè)置 meta 標(biāo)簽。

該 meta 標(biāo)簽的作用是讓當(dāng)前視區(qū)寬度等于設(shè)備寬度，同時不允許用戶手動縮放。 minimum-scale=1.0 與 maximum-scale=1.0 并不是必需的。但 width = device-width 則是必須的，以保證不會出現(xiàn)橫向滾動條。

width 能夠控制默認布局視區(qū)Layout Viewport的寬度，若不指定則默認會是980px或1024px，這個值會由設(shè)備自身所決定。當(dāng)把布局視區(qū)寬度設(shè)置為移動設(shè)備寬度 width = device-width 時，此時布局視區(qū)將會變成完美視區(qū)。

其實要將當(dāng)前視區(qū)寬度設(shè)置為完美視區(qū)寬度，既可以設(shè)置 width = device-width 也可以設(shè)置 initial-scale = 1.0 ，但是單單設(shè)置 width = device-width 會導(dǎo)致iPhone、iPad設(shè)備中橫豎屏不分，單單設(shè)置 initial-scale = 1.0 則會導(dǎo)致IE中橫豎屏不分。所以都以豎屏的完美視口寬度為標(biāo)準(zhǔn)，最完美的寫法時兩則都寫上去， width = device-width 解決iPhone、iPad缺陷， initial-scale = 1.0 則解決IE的缺陷。

CSS3新增視區(qū)單位vm和vh，在移動端iOS8+和Android4.4+獲得支持。

設(shè)備像素比定義了物理像素與設(shè)備獨立像素之間的對應(yīng)關(guān)系，計算公式為：設(shè)備像素比 = 物理像素 / 設(shè)備獨立像素。

在CSS中可通過以下方式進行媒體查詢，針對不同DPR設(shè)備做出樣式適配。

在JavaScript中可通過 window.devicePixelRatio 獲取當(dāng)前設(shè)備的DPR。

在Ratina高清設(shè)備屏幕中一個CSS像素對應(yīng)4個物理像素

Web頁面設(shè)置視口后，頁面與屏幕是1:1顯示，移動設(shè)備都具有設(shè)備像素比 DPR ，當(dāng)DPR=2時移動設(shè)備上的一個CSS像素由4個物理像素點組成。

安卓客戶端限制了 viewport 設(shè)置的縮放屬性，讓客戶端放開限制就行，但是由于市場上的app版本還是不支持，所以需要做兼容性處理。

iPhone6 上有1px 的滾動條，最后處理方案是通過 viewport 中的 maximum-scale 的值加了0.1，由于設(shè)置了user-scalable=no，maximum-scale 的值加0.1并不會有什么影響。

通過JS動態(tài)獲取移動設(shè)備的設(shè)備像素比，通過設(shè)備像素比來計算并設(shè)備Web頁面中 html 標(biāo)簽的字體大小 font-size 以及縮放比例。

例如：動態(tài)設(shè)置 html 的font-size, 同時根據(jù)設(shè)備DPR調(diào)整頁面的縮放值，進而達到高清效果。

rem 全稱 font size of the root element 是指相對于根元素的字體大小的相對單位，計算規(guī)則依賴于根元素。

rem 是通過根元素進行適配的，web中根元素是指 html ，所以通過設(shè)置 html 的字體大小即可控制 rem 的大小。

REM布局的核心是設(shè)置好根 html 元素的字體大小 font-size ，為了防止在高清屏下像素不夠用而導(dǎo)致模糊，當(dāng)拿到移動設(shè)計稿時，移動設(shè)計稿一般會以iPhone5設(shè)備寬320px或iPhone6設(shè)備寬375px為基準(zhǔn)，制作出兩倍寬的設(shè)計稿，即640px或750px。

例如：設(shè)置 html 標(biāo)簽的 font-size:10px ，6rem即6*10px。

rem 適用于WebApp，出于兼容性考慮，WebApp下使用 rem 更加能凸價值和功能。

使用CSS的媒體查詢控制

移動UI設(shè)計稿會采用iPhone寬度作為標(biāo)準(zhǔn)

使用JS控制Web頁面文字大小使其自適應(yīng)屏幕

使用 rem 布局的本質(zhì)是等比縮放，一般是基于寬度。

將屏幕寬度均分100份，每一份的寬度使用x表示，即x=屏幕寬度/100，如果將x作為單位，x前面的數(shù)值代表屏幕寬度的百分比。想要屏幕元素隨著屏幕寬度等比縮放，只需要確定x單位，可通過CSS3中的 rem 來實現(xiàn)?？赏ㄟ^JS設(shè)置HTML字體大小等于屏幕寬度的百分之一。

若UE設(shè)計稿寬度尺寸為640px，設(shè)計稿中某元素寬度為100px，則可以計算出100 / 640px * 100px = 15.625。

最佳實踐：px2rem移動端自適應(yīng)方案 https://github.com/imochen/hotcss

字體大小不能使用 rem ，因為字體大小和字體寬度并不是線性關(guān)系，所以字體大小不能使用 rem 。由于設(shè)置根元素字體大小會影響所有沒有設(shè)置字體大小的元素，因為字體大小是會繼承的，可以在 body 上做字體修正。

如何實現(xiàn)字體的響應(yīng)式，可通過修改 body 字體大小，同時設(shè)置字體大小使用 em 單位。

二、網(wǎng)頁布局設(shè)計有哪些類型?

1、拐角型

這種類型其實與國字型很相近的，只是在形式上不一樣，最上面的部分是網(wǎng)站的標(biāo)題以及網(wǎng)站的橫幅廣告條，一種很常見的類型是最上面是標(biāo)題及廣告，左側(cè)是導(dǎo)航鏈接。

2、“三”字型布局

這種布局多用于國外網(wǎng)站，國內(nèi)用得不多。特點是在頁面上有橫向兩條色塊，將頁面整體分割開，色塊中大多放廣告條、更新和版權(quán)提示。

3、標(biāo)題正文類型

上面是網(wǎng)站的標(biāo)題，或者是類似的東西，接著就是網(wǎng)站的正文內(nèi)容，例如是一些文章或者是注冊登錄頁面。

4、對稱對比型

對稱對比型采取左右或上下對稱的布局，一半深色，一半淺色，一般用于設(shè)計型網(wǎng)站。而其優(yōu)點是視覺沖擊力強，缺點是將兩部分進行有機結(jié)合較難。

5、變化型

即上面幾種類型的結(jié)合與變化，比如本站在視覺上是很接近拐角型的，但所實現(xiàn)的功能的實質(zhì)是那種上、左、右結(jié)構(gòu)的綜合框架型。

6、左右框架類型

這是一種左右為分別兩頁的框架結(jié)構(gòu)，一般布局是：片段含導(dǎo)航鏈接，最上面有時是一個小的標(biāo)題或標(biāo)志，而右面就是主要內(nèi)容，最常使用是論壇網(wǎng)站，企業(yè)網(wǎng)站中的內(nèi)頁有很多是采用這種布局方式的而這種類型的布局的特點是結(jié)構(gòu)清晰明了。

7、POP型式

POP形式是指頁面布局像一張宣傳海報，以一張精美圖片作為頁面設(shè)計中心。一般常用于時尚類網(wǎng)站，優(yōu)點是漂亮吸引人，缺點則是速度慢。

三、網(wǎng)頁版面布局有幾種？

八種

1．T型布局

T型布局是指頁面頂部為橫條網(wǎng)站標(biāo)志和廣告條，下方左半部分為主菜單，右半部分為顯示內(nèi)容的布局。因為菜單背景餃探，整體效果類似英文字母T，所以稱之為T型布局，這是網(wǎng)頁設(shè)計中使用最廣泛的一種布局方式。其優(yōu)點是頁面結(jié)構(gòu)清晰，主次分明，是初學(xué)者最容易學(xué)習(xí)的布局方法；缺點是規(guī)矩呆板，如果把握不好，在細節(jié)和色彩搭配上不注意，容易讓人看了之后感到乏味。

2．“口”型布局

“口”型布局是頁面上下各有一個廣告條，左邊是主菜單，右邊是友情鏈接等內(nèi)容，中間是主要內(nèi)容。其優(yōu)點是充分利用了版面，信息量大；缺點是頁面擁擠，不夠靈活。

3．“國”型布局

“國”型布局又稱為“同”型布局，是一些大型網(wǎng)站喜歡使用的布局類型。頁面頂部是一橫條，橫條左部設(shè)置網(wǎng)站標(biāo)志，右部是橫條廣告，橫條下部是水平放置的主導(dǎo)航欄。導(dǎo)航欄下方分為左中右三欄，左邊一般放置內(nèi)容導(dǎo)航、二級欄目、注冊登錄、搜索引擎等，右邊一般放置動態(tài)新聞、熱點內(nèi)容、友情鏈接等，中間顯示網(wǎng)頁的主體內(nèi)容，在頁面的最下方是一橫條狀菜單或廣告，也可以是網(wǎng)站的一些基本信息、聯(lián)系方式、版權(quán)聲明等。這種布局通常用于主頁設(shè)計，主要優(yōu)點是頁面容納的內(nèi)容多，信息量大。

4．標(biāo)題正文型布局

標(biāo)題正文型布局最上方是標(biāo)題或廣告等內(nèi)容，下方是正文，通常文章頁面或注冊頁面采用此種布局，其特點是簡潔明快，干擾信息少，較為正規(guī)。

5．“三”型布局

“三”型布局具有簡潔明快的藝術(shù)效果，適合于藝術(shù)類、收藏類、展示類網(wǎng)站。這種布局往往采用簡單的圖像和線條代替擁擠的文字，給瀏覽者以強烈的視覺沖擊，使其感覺進入了一幅完整的畫面，而不是一個分門別類的超市。它的一級頁面和二級頁面的鏈接都按行水平排列在頁面的中部，網(wǎng)站標(biāo)志非常醒目。

6．“川”型布局

“川”型布局比較特殊，整個頁面在垂直方向分為3列，網(wǎng)站的內(nèi)容按欄目分布在這3列中，可以最大限度地突出主頁的索引功能。如果網(wǎng)站欄Bf良多，可以考慮采用這種布局。它和“國”形布局的主要區(qū)別是：把主內(nèi)容區(qū)換成了各個二級頁面的鏈接，其中的不足是二級欄目比例不易配置平衡，色彩不易協(xié)調(diào)。

7．POP布局

POP布局像一張宣傳海報，以一張精美圖片作為頁面的設(shè)計中心，在適當(dāng)位置放置主菜單，常用于時尚類站點。這種布局方式不講究上下和左右的對稱，但要求平衡有韻律，能達到動感的效果，其優(yōu)點是漂亮吸引入，缺點是速度慢。

8．變化型

采用上述幾種布局的結(jié)合與變化，布局采用上、下、左、右結(jié)合的綜合型框架，再結(jié)合F1ash動畫，使頁面形式更加多樣，視覺沖擊力更強。

網(wǎng)頁布局的基本形式主要有上述幾種類型，至于哪種布局類型最好，需要具體問題具體分析，要從網(wǎng)站內(nèi)容、頁面結(jié)構(gòu)和表現(xiàn)形式等多方面進行綜合考慮，同時也需要制作者具有較高的設(shè)計水平。

四、網(wǎng)頁設(shè)計應(yīng)該如何布局

網(wǎng)站結(jié)構(gòu)與優(yōu)化很重要，頁面布局也是非常重要的，讓客戶第一眼看到網(wǎng)站的感覺是怎么樣，如果第一感覺不好，相信下一次就不一定來了，所以網(wǎng)頁的內(nèi)容除了用戶的需求之外，還要注重用戶體驗。下面的內(nèi)容，就以兩個方面來講，一個是搜索引擎的識別，一個是用戶體驗：

工具：電腦、網(wǎng)站

步驟：

一、搜索引擎的識別

1、網(wǎng)站具有清晰的導(dǎo)航

根據(jù)網(wǎng)站的導(dǎo)航去制定需求。一個清晰明了的用戶導(dǎo)航可以讓游客在網(wǎng)站中自由的訪問，并且根據(jù)需要選擇合適的內(nèi)容，而網(wǎng)站導(dǎo)航的加入也可以加大網(wǎng)友的訪問深度。

2、頁面整潔，欄目之間合理布局

之前看過一個做服裝的網(wǎng)站，一進入這個網(wǎng)站就感覺到了皇宮一樣，很華麗也很唯美，但是就找不到一點文字介紹，全部都是圖片，操作起來很不方便，由于偶然進入了一個較深的頁面(該網(wǎng)站沒有面包屑導(dǎo)航)，找不到回去的路就只好關(guān)掉了頁面，無形中就會這個網(wǎng)站的跳出率做出了貢獻。

3、設(shè)置用戶評論板塊，增加網(wǎng)站互動性

不可否認的是，現(xiàn)在很多網(wǎng)站都過于獨立，和用戶之間的互動性不夠，其實網(wǎng)站互動性的上升能大大提升網(wǎng)站自身的可信程度，尤其對于一個新站來說，知名度不夠，號召力不強，用戶是無法相信的。而這時用戶的參與無疑就讓網(wǎng)站自身的可信力大大上升，而且一個網(wǎng)站最成功莫過于有眾多用戶的參與，而評論無疑會讓網(wǎng)站生命力更強。

二、以用戶體驗為前提

1、頁面元素的豐富性。

什么叫做頁面元素的豐富性呢，就是網(wǎng)站有圖片、有視頻、有評論、有加粗、有分段這樣可以說是一個優(yōu)質(zhì)的頁面。當(dāng)然要在適當(dāng)?shù)那闆r下出現(xiàn)圖片、視頻、或者其它的元素。這樣也會增加頁面的價值。

2、頁面的文字大小要符合一般用戶的閱讀習(xí)慣。

不要太大，也不要太小，一般13號的字體就可以了。字體的顏色，也要和網(wǎng)頁的風(fēng)格協(xié)調(diào)，一般都是黑色或者深灰色。文章排版要鮮明，段落得當(dāng)，這樣更容易讓客戶閱讀。還有文章內(nèi)盡量少用錨文本，文章內(nèi)的錨文本一般都是以用戶的需求性和相關(guān)性來增加錨文本。盡量不要影響用戶閱讀。