分辨率Top5
百度統(tǒng)計(jì)流量研究院統(tǒng)計(jì)結(jié)果
360 x 640
375 x 667
1366 x 768
1440 x 900
1920 x 1080
這是頁面布局常用的尺寸基準(zhǔn)
百度統(tǒng)計(jì)流量研究院分辨率使用情況統(tǒng)計(jì)
![]()
常用的布局方式
固定寬度布局
流動布局
彈性布局
柵格布局
響應(yīng)式布局
01.固定寬度布局
—
定義設(shè)置固定的容器，里面的各個(gè)模塊也是固定寬度
缺點(diǎn)
分辨率過大，會留白
分辨率過小撤嫩，底部會出現(xiàn)滾動條
優(yōu)點(diǎn)
設(shè)計(jì)師設(shè)計(jì)的就是用戶最終看到的
設(shè)計(jì)更簡單轨功，更容易控制
基于分辨率480px設(shè)計(jì)
分辨率1280px
02.流動布局
—
定義相對于分辨率大小的百分比自適應(yīng)不同的分辨
缺點(diǎn)
分辨率過大惜论，內(nèi)容會被拉長早龟，難易閱讀
設(shè)計(jì)師需要在不同的分辨率下測試，才能看到最終的效果
不同分辨率下的圖像或者視頻需要準(zhǔn)備不同的素材
優(yōu)點(diǎn)
對用戶更加友好寂汇，自適應(yīng)不同的分辨率
基于分辨率680px設(shè)計(jì)
分辨率1280px
03.彈性布局
—
定義?使用不同的相對單位（em 和 rem）
em
相對單位权逗，跟隨父元素font-size的大小變化而變化
rem
相對單位美尸，跟隨html根元素font-size的大小變化而變化
優(yōu)點(diǎn)
更具媒體查詢，設(shè)置html根元素font-size的大小斟薇，自適應(yīng)不同的分辨率
em
rem
04.柵格布局
—
定義?是一種平面設(shè)計(jì)的方式师坎，用固定的格子設(shè)計(jì)布局，規(guī)范網(wǎng)頁中的版面布局
布局建議
設(shè)計(jì)師根據(jù)布局需要制定不同的版式或者劃分區(qū)塊堪滨，在固定寬度下胯陋，切分多種方式如12*30，n(柵格數(shù))越大袱箱，靈活度越高遏乔，可以根據(jù)網(wǎng)頁的實(shí)際復(fù)雜度選用對應(yīng)的切法
優(yōu)點(diǎn)
大大提高網(wǎng)頁的規(guī)范性和可重用性
基于柵格設(shè)計(jì)可以讓網(wǎng)頁各個(gè)頁面的布局保持一致
05.響應(yīng)式布局
—
定義(即實(shí)現(xiàn)的關(guān)鍵技術(shù))?使用媒體查詢根據(jù)不同的分辨率設(shè)置不同的樣式
優(yōu)點(diǎn)
對于不同分辨率，可設(shè)計(jì)更符合用戶體驗(yàn)的網(wǎng)頁
分辨率1280px
分辨率767px
分辨率767px发笔，點(diǎn)擊上圖左上角菜單欄
總結(jié)
—
以上幾種布局方式并不是完全互斥的
不同的布局之間可以互相嵌套
并且也沒有哪一種布局方式使用于所有的應(yīng)用場景
具體使用哪種布局方式還需要看實(shí)際需求以及實(shí)現(xiàn)的難易程度
