怎樣平衡好頁面布局與屏幕分辨率

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

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

為了保證在小屏下，內(nèi)容可查看完整，因此目前常用的定寬頁面尺寸是1200px，實(shí)際可能會(huì)根據(jù)所展示的內(nèi)容，頁面導(dǎo)航，頁面其他元素，頁面所要適配的終端等，進(jìn)行調(diào)整。比如，簡(jiǎn)書首頁的寬度為960px；京東訂單詳情為1210px。定寬頁面常用于：詳情，圖片，字段并不多的列表，內(nèi)容流等。定寬頁面雖然可以免去屏幕適配的煩惱，但是對(duì)于有些內(nèi)容，可能會(huì)感覺在大屏下顯得過于小氣，體驗(yàn)并不好，比如圖片。而站酷在這一點(diǎn)上，處理的比較好，可以借鑒。當(dāng)屏幕寬度大于1600時(shí)，采用1400的定寬；當(dāng)屏幕小于1600，使用1150的寬，同時(shí)圖片大小也會(huì)發(fā)生改變。（注：淘寶和京東的商品列表頁也采用了類似的處理方式）

2.全屏頁面全屏頁面指，除了頁面左右兩側(cè)的邊界，頁面中的內(nèi)容會(huì)隨著屏幕大小而撐滿。但是為了保證頁面內(nèi)容正常顯示，一般會(huì)設(shè)定最小的適配寬度，頁面低于該寬度不再設(shè)配，頁面出現(xiàn)橫向滾動(dòng)條。全屏頁面常用于：網(wǎng)站宣傳頁、采用左側(cè)導(dǎo)航的管理類網(wǎng)站、字段很多的列表頁、需要全屏查看的看板頁、使用瀑布流的頁面，或者頁面中有用戶需要可視區(qū)域更大才可方便操作的元素，比如地圖軌跡等。對(duì)于全屏頁面，需要考慮，當(dāng)屏幕變大或者變小時(shí)如果適配。

一般常用的適配方式有：根據(jù)屏幕大小等比例放大（或者根據(jù)不同的屏幕設(shè)定不同的放大/縮小比例）；

根據(jù)屏幕大小拉寬元素，元素高度不變（大屏下，可能會(huì)導(dǎo)致元素比例變形，視覺效果不佳）；根據(jù)屏幕大小，增加/減少每行顯示的內(nèi)容多少（多數(shù)適合于頁面內(nèi)容為網(wǎng)格布局的情況）；

使用bootstrap等框架，采用響應(yīng)式布局（根據(jù)屏幕大小，改變大小的同時(shí)改變?cè)嘏虐娣绞剑?。具體采用哪種適配方式，需根據(jù)頁面內(nèi)容，以及內(nèi)容在大小屏幕下的顯示情況，以及整個(gè)網(wǎng)站所使用的框架等進(jìn)行選擇。

分享文章：怎樣平衡好頁面布局與屏幕分辨率
網(wǎng)頁地址：http://muchs.cn/news/166181.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、域名注冊(cè)、全網(wǎng)營(yíng)銷推廣、網(wǎng)站營(yíng)銷、關(guān)鍵詞優(yōu)化、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)