企業網絡推廣中網站制作布局及移動適配的重要性

　　在考慮網頁制作樣式布局的時候，或者后期與UI、前端制作人員溝通的時候，經常會被問到“這個頁面是定寬頁面還是全屏頁面?”“針對不同移動終端做適配”“這個頁面是使用瀏覽器的滾動條還是頁面內滾動?”本文作者分享了自己的解決方法。

　　一、頁面寬度：定寬頁面or全屏頁面?

　　采用定寬或者全屏。而大部分網站，是需要根據頁面內容，才能決定是使用定寬還是全屏。

　　1.定寬頁面

　　目前市場上，筆記本常見的屏幕分辨率為1366*768;臺式機常見分辨率有1440*900、1920*1080。市場上可能遇到的** 低分辨率為1280*768，比如投影儀或者其他設備(其他更小的屏幕可暫不考慮)。

　　為了** 在小屏下，內容可查看完整，因此目前常用的定寬頁面尺寸是1200px，實際可能會根據所展示的內容，頁面導航，頁面其他元素，頁面所要適配的終端等，進行調整。比如，簡書首頁的寬度為960px;京東訂單詳情為1210px。

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

　　定寬頁面雖然可以免去屏幕適配的煩惱，但是對于有些內容，可能會感覺在大屏下顯得過于小氣，體驗并不好，比如圖片。而站酷在這一點上，處理的比較好，可以借鑒。當屏幕寬度大于 1600 時，采用 1400 的定寬;當屏幕小于1600，使用 1150 的寬，同時圖片大小也會發生改變。(注：淘寶和京東的商品列表頁也采用了類似的處理方式)

　　2.全屏頁面

　　全屏頁面指，除了頁面左右兩側的邊界，頁面中的內容會隨著屏幕大小而撐滿。但是為了** 頁面內容正常顯示，一般會設定** 小的適配寬度，頁面低于該寬度不再設配，頁面出現橫向滾動條。

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

　　對于全屏頁面，需要考慮，當屏幕變大或者變小時如果適配。一般常用的適配方式有：

　　根據屏幕大小等比例放大(或者根據不同的屏幕設定不同的放大/縮小比例);

　　根據屏幕大小拉寬元素，元素高度不變(大屏下，可能會導致元素比例變形，視覺效果不佳);

　　根據屏幕大小，增加/減少每行顯示的內容多少(多數適合于頁面內容為網格布局的情況);

　　使用bootstrap等框架，采用響應式布局(根據屏幕大小，改變大小的同時改變元素排版方式)。

　　具體采用哪種適配方式，需根據頁面內容，以及內容在大小屏幕下的顯示情況，以及整個網站所使用的框架等進行選擇。

　　二 頁面高度

　　當頁面內容超出頁面高度時，是采用頁面滾動條，還是模塊內滾動?

　　頁面滾動條適合于內容流的頁面。這種頁面，頁面底部固定或底部無其他元素。另外，這種滾動方式需與‘返回頂部’按鈕配合使用。當數據需要分頁時，多采用滾動分頁。

　　模塊內滾動，常用于操作需固定在頂部/底部的頁面。當頁面中有多個模塊需要內滾動或者模塊被分割的較小時，需考慮在小屏下每個模塊的可視區域是否過小而無法進行操作。當數據需要分頁時，多采用翻頁分頁。

　　如下示例：由于在 1366 的屏幕下，內容的顯示高度除去瀏覽器的高度以及網站導航的高度，可能只有 650 左右，導致可視區域過小影響用戶體驗。因此整個頁面的布局可能需要重新調整。

　　三 總結

　　制作頁面時，需特別注意，屏幕大小對頁面的影響。否則，會導致整個頁面的交互布局需重新制作。另外，具體使用哪種方式，需權衡各自的利弊，** 大程度** 大小屏幕下，用戶的體驗不受影響。