在考慮web頁(yè)面布局的時(shí)候，或者后期與UI、前端同事溝通的時(shí)候，經(jīng)常會(huì)被問(wèn)到“這個(gè)頁(yè)面是定寬頁(yè)面還是全屏頁(yè)面？”“針對(duì)大小屏幕這個(gè)頁(yè)面如何適配？”“這個(gè)頁(yè)面是使用瀏覽器的滾動(dòng)條還是頁(yè)面內(nèi)滾動(dòng)？”本文作者分享了自己的解決方法。

文/冬瓜一號(hào)

一、頁(yè)面寬度：定寬頁(yè)面or全屏頁(yè)面？

采用定寬或者全屏。而大部分網(wǎng)站，是需要根據(jù)頁(yè)面內(nèi)容，才能決定是使用定寬還是全屏。

1.定寬頁(yè)面

目前市場(chǎng)上，筆記本常見(jiàn)的屏幕分辨率為1366*768；臺(tái)式機(jī)常見(jiàn)分辨率有1440*900、1920*1080。市場(chǎng)上可能遇到的最低分辨率為1280*768，比如投影儀或者其他設(shè)備（其他更小的屏幕可暫不考慮）。

為了保證在小屏下，內(nèi)容可查看完整，因此目前常用的定寬頁(yè)面尺寸是1200px，實(shí)際可能會(huì)根據(jù)所展示的內(nèi)容，頁(yè)面導(dǎo)航，頁(yè)面其他元素，頁(yè)面所要適配的終端等，進(jìn)行調(diào)整。比如，簡(jiǎn)書(shū)首頁(yè)的寬度為960px；京東訂單詳情為1210px。

定寬頁(yè)面常用于：詳情，圖片，字段并不多的列表，內(nèi)容流等。

定寬頁(yè)面雖然可以免去屏幕適配的煩惱，但是對(duì)于有些內(nèi)容，可能會(huì)感覺(jué)在大屏下顯得過(guò)于小氣，體驗(yàn)并不好，比如圖片。而站酷在這一點(diǎn)上，處理的比較好，可以借鑒。當(dāng)屏幕寬度大于 1600 時(shí)，采用 1400 的定寬；當(dāng)屏幕小于1600，使用 1150 的寬，同時(shí)圖片大小也會(huì)發(fā)生改變。（注：淘寶和京東的商品列表頁(yè)也采用了類似的處理方式）

2.全屏頁(yè)面

全屏頁(yè)面指，除了頁(yè)面左右兩側(cè)的邊界，頁(yè)面中的內(nèi)容會(huì)隨著屏幕大小而撐滿。但是為了保證頁(yè)面內(nèi)容正常顯示，一般會(huì)設(shè)定最小的適配寬度，頁(yè)面低于該寬度不再設(shè)配，頁(yè)面出現(xiàn)橫向滾動(dòng)條。

全屏頁(yè)面常用于：網(wǎng)站宣傳頁(yè)、采用左側(cè)導(dǎo)航的管理類網(wǎng)站、字段很多的列表頁(yè)、需要全屏查看的看板頁(yè)、使用瀑布流的頁(yè)面，或者頁(yè)面中有用戶需要可視區(qū)域更大才可方便操作的元素，比如地圖軌跡等。

對(duì)于全屏頁(yè)面，需要考慮，當(dāng)屏幕變大或者變小時(shí)如果適配。一般常用的適配方式有：

• 根據(jù)屏幕大小等比例放大（或者根據(jù)不同的屏幕設(shè)定不同的放大/縮小比例）；

• 根據(jù)屏幕大小拉寬元素，元素高度不變（大屏下，可能會(huì)導(dǎo)致元素比例變形，視覺(jué)效果不佳）；

• 根據(jù)屏幕大小，增加/減少每行顯示的內(nèi)容多少（多數(shù)適合于頁(yè)面內(nèi)容為網(wǎng)格布局的情況）；

• 使用bootstrap等框架，采用響應(yīng)式布局（根據(jù)屏幕大小，改變大小的同時(shí)改變?cè)嘏虐娣绞剑?/p>

具體采用哪種適配方式，需根據(jù)頁(yè)面內(nèi)容，以及內(nèi)容在大小屏幕下的顯示情況，以及整個(gè)網(wǎng)站所使用的框架等進(jìn)行選擇。

二 頁(yè)面高度

當(dāng)頁(yè)面內(nèi)容超出頁(yè)面高度時(shí)，是采用頁(yè)面滾動(dòng)條，還是模塊內(nèi)滾動(dòng)？

頁(yè)面滾動(dòng)條適合于內(nèi)容流的頁(yè)面。這種頁(yè)面，頁(yè)面底部固定或底部無(wú)其他元素。另外，這種滾動(dòng)方式需與‘返回頂部’按鈕配合使用。當(dāng)數(shù)據(jù)需要分頁(yè)時(shí)，多采用滾動(dòng)分頁(yè)。

模塊內(nèi)滾動(dòng)，常用于操作需固定在頂部/底部的頁(yè)面。當(dāng)頁(yè)面中有多個(gè)模塊需要內(nèi)滾動(dòng)或者模塊被分割的較小時(shí)，需考慮在小屏下每個(gè)模塊的可視區(qū)域是否過(guò)小而無(wú)法進(jìn)行操作。當(dāng)數(shù)據(jù)需要分頁(yè)時(shí)，多采用翻頁(yè)分頁(yè)。

如下示例：由于在 1366 的屏幕下，內(nèi)容的顯示高度除去瀏覽器的高度以及網(wǎng)站導(dǎo)航的高度，可能只有 650 左右，導(dǎo)致可視區(qū)域過(guò)小影響用戶體驗(yàn)。因此整個(gè)頁(yè)面的布局可能需要重新調(diào)整。

三 總結(jié)

設(shè)計(jì)頁(yè)面時(shí)，需特別注意，屏幕大小對(duì)頁(yè)面的影響。否則，會(huì)導(dǎo)致整個(gè)頁(yè)面的交互布局需重新設(shè)計(jì)。另外，具體使用哪種方式，需權(quán)衡各自的利弊，最大程度保證大小屏幕下，用戶的體驗(yàn)不受影響。