第(di)一(yi)、具體采用(yong)哪(na)種適配方(fang)式，需(xu)(xu)根據頁(ye)(ye)(ye)(ye)(ye)面(mian)(mian)(mian)內(nei)容，以(yi)及內(nei)容在(zai)大小(xiao)屏(ping)幕下的(de)(de)顯示情況，以(yi)及整個(ge)網(wang)站(zhan)所使用(yong)的(de)(de)框架等進行選擇。二 頁(ye)(ye)(ye)(ye)(ye)面(mian)(mian)(mian)高(gao)(gao)度(du)當(dang)(dang)頁(ye)(ye)(ye)(ye)(ye)面(mian)(mian)(mian)內(nei)容超出頁(ye)(ye)(ye)(ye)(ye)面(mian)(mian)(mian)高(gao)(gao)度(du)時(shi)，是采用(yong)頁(ye)(ye)(ye)(ye)(ye)面(mian)(mian)(mian)滾動條，還是模(mo)塊(kuai)內(nei)滾動？頁(ye)(ye)(ye)(ye)(ye)面(mian)(mian)(mian)滾動條適合(he)于(yu)內(nei)容流的(de)(de)頁(ye)(ye)(ye)(ye)(ye)面(mian)(mian)(mian)。這(zhe)種頁(ye)(ye)(ye)(ye)(ye)面(mian)(mian)(mian)，頁(ye)(ye)(ye)(ye)(ye)面(mian)(mian)(mian)底部固定(ding)或底部無其他元素(su)。另外，這(zhe)種滾動方(fang)式需(xu)(xu)與‘返回頂部’按鈕配合(he)使用(yong)。當(dang)(dang)數據需(xu)(xu)要(yao)分頁(ye)(ye)(ye)(ye)(ye)時(shi)，多采用(yong)滾動分頁(ye)(ye)(ye)(ye)(ye)。模(mo)塊(kuai)內(nei)滾動，常用(yong)于(yu)操作需(xu)(xu)固定(ding)在(zai)頂部/底部的(de)(de)頁(ye)(ye)(ye)(ye)(ye)面(mian)(mian)(mian)。當(dang)(dang)頁(ye)(ye)(ye)(ye)(ye)面(mian)(mian)(mian)中有多個(ge)模(mo)塊(kuai)需(xu)(xu)要(yao)內(nei)滾動或者模(mo)塊(kuai)被分割(ge)的(de)(de)較小(xiao)時(shi)，需(xu)(xu)考慮在(zai)小(xiao)屏(ping)下每個(ge)模(mo)塊(kuai)的(de)(de)可(ke)視區域(yu)是否過小(xiao)而無法進行操作。當(dang)(dang)數據需(xu)(xu)要(yao)分頁(ye)(ye)(ye)(ye)(ye)時(shi)，多采用(yong)翻頁(ye)(ye)(ye)(ye)(ye)分頁(ye)(ye)(ye)(ye)(ye)。如(ru)下示例：由于(yu)在(zai) 1366 的(de)(de)屏(ping)幕下，內(nei)容的(de)(de)顯示高(gao)(gao)度(du)除去(qu)瀏覽器的(de)(de)高(gao)(gao)度(du)以(yi)及網(wang)站(zhan)導航的(de)(de)高(gao)(gao)度(du)，可(ke)能只(zhi)有 650 左右，導致(zhi)可(ke)視區域(yu)過小(xiao)影響用(yong)戶體驗。因(yin)此整個(ge)頁(ye)(ye)(ye)(ye)(ye)面(mian)(mian)(mian)的(de)(de)布局可(ke)能需(xu)(xu)要(yao)重新調整。 

第二、頁(ye)(ye)面(mian)(mian)寬(kuan)度：定(ding)(ding)(ding)寬(kuan)頁(ye)(ye)面(mian)(mian)or全屏頁(ye)(ye)面(mian)(mian)？采(cai)用定(ding)(ding)(ding)寬(kuan)或者全屏。而大部分(fen)網站，是需要根據(ju)頁(ye)(ye)面(mian)(mian)內(nei)容(rong)，才(cai)能決定(ding)(ding)(ding)是使(shi)用定(ding)(ding)(ding)寬(kuan)還(huan)是全屏。1.定(ding)(ding)(ding)寬(kuan)頁(ye)(ye)面(mian)(mian)目(mu)前市場(chang)上，筆記本(ben)常(chang)見(jian)的(de)(de)屏幕分(fen)辨(bian)率為(wei)1366*768；臺式機(ji)常(chang)見(jian)分(fen)辨(bian)率有(you)1440*900、1920*1080。市場(chang)上可(ke)能遇到的(de)(de)更(geng)低分(fen)辨(bian)率為(wei)1280*768，比如投影儀或者其(qi)他設備（其(qi)他更(geng)小的(de)(de)屏幕可(ke)暫不考慮）。為(wei)了保證在小屏下(xia)，內(nei)容(rong)可(ke)查看完整，因此目(mu)前常(chang)用的(de)(de)定(ding)(ding)(ding)寬(kuan)頁(ye)(ye)面(mian)(mian)尺寸是1200px，實際可(ke)能會(hui)根據(ju)所展(zhan)示的(de)(de)內(nei)容(rong)，頁(ye)(ye)面(mian)(mian)導航(hang)，頁(ye)(ye)面(mian)(mian)其(qi)他元素，頁(ye)(ye)面(mian)(mian)所要適配的(de)(de)終端(duan)等(deng)，進行(xing)調整。比如，簡書首頁(ye)(ye)的(de)(de)寬(kuan)度為(wei)960px；京東訂單詳(xiang)情為(wei)1210px。定(ding)(ding)(ding)寬(kuan)頁(ye)(ye)面(mian)(mian)常(chang)用于：詳(xiang)情，圖片，字段并(bing)不多的(de)(de)列表(biao)，內(nei)容(rong)流等(deng)。定(ding)(ding)(ding)寬(kuan)頁(ye)(ye)面(mian)(mian)雖(sui)然(ran)可(ke)以(yi)免(mian)去屏幕適配的(de)(de)煩惱，但(dan)是對于有(you)些內(nei)容(rong)，可(ke)能會(hui)感覺在大屏下(xia)顯得過(guo)于小氣，體驗并(bing)不好(hao)，比如圖片。

第三(san)、而站酷在這一點上(shang)，處理的(de)(de)比較好(hao)，可(ke)以(yi)借鑒。當(dang)(dang)屏(ping)幕(mu)(mu)寬(kuan)度大(da)于(yu) 1600 時(shi)，采(cai)用(yong) 1400 的(de)(de)定(ding)寬(kuan)；當(dang)(dang)屏(ping)幕(mu)(mu)小(xiao)(xiao)(xiao)(xiao)(xiao)于(yu)1600，使用(yong) 1150 的(de)(de)寬(kuan)，同時(shi)圖片大(da)小(xiao)(xiao)(xiao)(xiao)(xiao)也會(hui)(hui)發生改變(bian)(bian)(bian)。（注：淘寶和京東的(de)(de)商品列(lie)表頁(ye)(ye)(ye)也采(cai)用(yong)了(le)類似的(de)(de)處理方式(shi)(shi)）2.全屏(ping)頁(ye)(ye)(ye)面(mian)(mian)(mian)(mian)全屏(ping)頁(ye)(ye)(ye)面(mian)(mian)(mian)(mian)指，除了(le)頁(ye)(ye)(ye)面(mian)(mian)(mian)(mian)左右兩側的(de)(de)邊界，頁(ye)(ye)(ye)面(mian)(mian)(mian)(mian)中(zhong)的(de)(de)內(nei)容(rong)會(hui)(hui)隨(sui)著屏(ping)幕(mu)(mu)大(da)小(xiao)(xiao)(xiao)(xiao)(xiao)而撐滿。但是為(wei)了(le)保證頁(ye)(ye)(ye)面(mian)(mian)(mian)(mian)內(nei)容(rong)正常(chang)(chang)顯示，一般會(hui)(hui)設定(ding)最小(xiao)(xiao)(xiao)(xiao)(xiao)的(de)(de)適配(pei)寬(kuan)度，頁(ye)(ye)(ye)面(mian)(mian)(mian)(mian)低于(yu)該寬(kuan)度不(bu)再設配(pei)，頁(ye)(ye)(ye)面(mian)(mian)(mian)(mian)出現橫(heng)向(xiang)滾(gun)動條。全屏(ping)頁(ye)(ye)(ye)面(mian)(mian)(mian)(mian)常(chang)(chang)用(yong)于(yu)：網站宣傳頁(ye)(ye)(ye)、采(cai)用(yong)左側導航的(de)(de)管理類網站、字段(duan)很多的(de)(de)列(lie)表頁(ye)(ye)(ye)、需(xu)要(yao)(yao)全屏(ping)查看的(de)(de)看板(ban)頁(ye)(ye)(ye)、使用(yong)瀑布流的(de)(de)頁(ye)(ye)(ye)面(mian)(mian)(mian)(mian)，或者(zhe)頁(ye)(ye)(ye)面(mian)(mian)(mian)(mian)中(zhong)有(you)用(yong)戶需(xu)要(yao)(yao)可(ke)視區域更大(da)才可(ke)方便操作的(de)(de)元(yuan)素(su)，比如地圖軌跡等(deng)。對于(yu)全屏(ping)頁(ye)(ye)(ye)面(mian)(mian)(mian)(mian)，需(xu)要(yao)(yao)考慮，當(dang)(dang)屏(ping)幕(mu)(mu)變(bian)(bian)(bian)大(da)或者(zhe)變(bian)(bian)(bian)小(xiao)(xiao)(xiao)(xiao)(xiao)時(shi)如果適配(pei)。一般常(chang)(chang)用(yong)的(de)(de)適配(pei)方式(shi)(shi)有(you)：根據屏(ping)幕(mu)(mu)大(da)小(xiao)(xiao)(xiao)(xiao)(xiao)等(deng)比例(li)(li)放(fang)大(da)（或者(zhe)根據不(bu)同的(de)(de)屏(ping)幕(mu)(mu)設定(ding)不(bu)同的(de)(de)放(fang)大(da)/縮小(xiao)(xiao)(xiao)(xiao)(xiao)比例(li)(li)）；根據屏(ping)幕(mu)(mu)大(da)小(xiao)(xiao)(xiao)(xiao)(xiao)拉寬(kuan)元(yuan)素(su)，元(yuan)素(su)高(gao)度不(bu)變(bian)(bian)(bian)（大(da)屏(ping)下，可(ke)能會(hui)(hui)導致(zhi)元(yuan)素(su)比例(li)(li)變(bian)(bian)(bian)形，視覺效果不(bu)佳(jia)）；根據屏(ping)幕(mu)(mu)大(da)小(xiao)(xiao)(xiao)(xiao)(xiao)，增加/減少每行(xing)顯示的(de)(de)內(nei)容(rong)多少（多數(shu)適合于(yu)頁(ye)(ye)(ye)面(mian)(mian)(mian)(mian)內(nei)容(rong)為(wei)網格布局(ju)的(de)(de)情況）；使用(yong)bootstrap等(deng)框架，采(cai)用(yong)響(xiang)應式(shi)(shi)布局(ju)（根據屏(ping)幕(mu)(mu)大(da)小(xiao)(xiao)(xiao)(xiao)(xiao)，改變(bian)(bian)(bian)大(da)小(xiao)(xiao)(xiao)(xiao)(xiao)的(de)(de)同時(shi)改變(bian)(bian)(bian)元(yuan)素(su)排版方式(shi)(shi)）。

第四、總結設計頁面時，需特別注意，屏幕大小對頁面的影響。否則，會導致整個頁面的交互布局需重新設計。另外，具體使用哪種方式，需權衡各自的利弊，更大程度保證大小屏幕下，用戶的體驗不受影響。 來源：站長之家 

上一篇：貴陽網站建設公司幫助外貿企業品牌推廣的策略指南

下一篇：網站開發移動端網頁設計如何讓加載的速度變更快