在網(wǎng)頁設(shè)計中,定寬頁面和全屏頁面有以下不同的注意事項:
一、定寬頁面
-
尺寸確定
-
要考慮市場上常見的屏幕分辨率,目前筆記本常見分辨率為 1366768,臺式機有 1440900、1920*1080 等。為保證小屏內(nèi)容完整,常用定寬尺寸是 1200px,但實際會根據(jù)內(nèi)容、導航、適配終端等因素調(diào)整。例如,簡書首頁寬度為 960px,京東訂單詳情為 1210px。
-
內(nèi)容適配
-
定寬頁面常用于詳情、圖片、字段不多的列表、內(nèi)容流等。對于圖片等內(nèi)容,要注意在大屏下可能會顯得小氣。像站酷這樣的網(wǎng)站在這方面處理較好,當屏幕寬度大于 1600 時,采用 1400 的定寬;當屏幕小于 1600,使用 1150 的寬,并且圖片大小也會相應改變,淘寶和京東的商品列表頁也有類似處理,設(shè)計時需要參考這種根據(jù)屏幕寬度靈活調(diào)整內(nèi)容展示的方式。
二、全屏頁面
-
最小適配寬度設(shè)置
-
全屏頁面除兩側(cè)邊界外,內(nèi)容會隨著屏幕大小而撐滿。要設(shè)定最小的適配寬度,當頁面低于該寬度時不再適配,會出現(xiàn)橫向滾動條。這個最小適配寬度的設(shè)置要綜合考慮頁面內(nèi)容的正常顯示范圍,例如一些管理類網(wǎng)站、字段很多的列表頁等不同類型頁面的內(nèi)容完整展示需求。
-
適配方式選擇
-
適配方式有多種。一是根據(jù)屏幕大小等比例放大(或者根據(jù)不同的屏幕設(shè)定不同的放大 / 縮小比例),要確保內(nèi)容在不同屏幕比例下都能合理展示,避免出現(xiàn)拉伸變形等情況;二是根據(jù)屏幕大小拉寬元素,元素高度不變,但在大屏下可能導致元素比例變形,影響視覺效果,所以這種方式要謹慎使用;三是根據(jù)屏幕大小,增加 / 減少每行顯示的內(nèi)容多少,多數(shù)適合于頁面內(nèi)容為網(wǎng)格布局的情況;四是使用 bootstrap 等框架,采用響應式布局,根據(jù)屏幕大小改變大小的同時改變元素排版方式,選擇時要根據(jù)頁面內(nèi)容、在大小屏幕下的顯示情況以及整個網(wǎng)站所使用的框架等來綜合考慮。