分辨率Top5
百度统计流量研究院统计结果
360 x 640
375 x 667
1366 x 768
1440 x 900
1920 x 1080
这是页面布局常用的尺寸基准
百度统计流量研究院分辨率使用情况统计
![]()
常用的布局方式
固定宽度布局
流动布局
弹性布局
栅格布局
响应式布局
01.固定宽度布局
—
定义设置固定的容器，里面的各个模块也是固定宽度
缺点
分辨率过大，会留白
分辨率过小，底部会出现滚动条
优点
设计师设计的就是用户最终看到的
设计更简单，更容易控制
基于分辨率480px设计
分辨率1280px
02.流动布局
—
定义相对于分辨率大小的百分比自适应不同的分辨
缺点
分辨率过大，内容会被拉长，难易阅读
设计师需要在不同的分辨率下测试，才能看到最终的效果
不同分辨率下的图像或者视频需要准备不同的素材
优点
对用户更加友好，自适应不同的分辨率
基于分辨率680px设计
分辨率1280px
03.弹性布局
—
定义 使用不同的相对单位（em 和 rem）
em
相对单位，跟随父元素font-size的大小变化而变化
rem
相对单位，跟随html根元素font-size的大小变化而变化
优点
更具媒体查询，设置html根元素font-size的大小，自适应不同的分辨率
em
rem
04.栅格布局
—
定义 是一种平面设计的方式，用固定的格子设计布局，规范网页中的版面布局
布局建议
设计师根据布局需要制定不同的版式或者划分区块，在固定宽度下，切分多种方式如12*30，n(栅格数)越大，灵活度越高，可以根据网页的实际复杂度选用对应的切法
优点
大大提高网页的规范性和可重用性
基于栅格设计可以让网页各个页面的布局保持一致
05.响应式布局
—
定义(即实现的关键技术) 使用媒体查询根据不同的分辨率设置不同的样式
优点
对于不同分辨率，可设计更符合用户体验的网页
分辨率1280px
分辨率767px
分辨率767px，点击上图左上角菜单栏
总结
—
以上几种布局方式并不是完全互斥的
不同的布局之间可以互相嵌套
并且也没有哪一种布局方式使用于所有的应用场景
具体使用哪种布局方式还需要看实际需求以及实现的难易程度
