css常见网页布局方式

分辨率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，点击上图左上角菜单栏

总结

—

以上几种布局方式并不是完全互斥的

不同的布局之间可以互相嵌套

并且也没有哪一种布局方式使用于所有的应用场景

具体使用哪种布局方式还需要看实际需求以及实现的难易程度