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