静态布局（static layout）
静态布局也叫做固定布局，网页内容区采⽤绝对宽度，网页内每个模块的尺寸大小固定，一般整体在浏览器内居中显示，并会设置最小宽度min-width，当分辨率小于最小宽度就会出现滚动条，如果大于最小宽度则内容居中外加背景 。
应用场景 目前大部分的高校官网、医院官网、政府网站等都是静态布局，而且设计风格上也很老旧，当然并不是说静态布局的风格就是老旧，这个布局和设计风格没有多大关系，有很多新闻门户类、企业官网等网站采用静态布局，同样也很出彩。
优点 这种布局方式对设计师和前端来说都是最简单的，不用去考虑兼容性等问题。设计和开发成本低，后期维护成本低
缺点 在小屏上有可能出现横向滚动条，在大屏上会出现大量的空白，不能根据用户的屏幕尺寸做出不同的表现，用户体验比较差。
流式布局（fluid layout ）
流式布局是指页面按照百分比%定义宽度（也就是长度单位不是我们平常使用的px，而是百分数），来适配不同的屏幕分辨率，在不同的分辨率下网页布局保持不变，一般搭配min-、max-属性来控制尺寸流动范围，以免过大或者过小影响展示和阅读，页面内元素的高度和文字大小往往px来固定住，方便页面排版和阅读。流式布局的特点是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。
应用场景 流式布局典型的代表是栅格系统，一般页面中采用百分比定宽的部分都可以看做是流动布局的属性。目前大部分网页为了实现更好的视觉效果都会全局或局部使用流式布局。
优点 在不同分辨率屏幕上能够很好的展示页面元素，如果设计得当，流动布局能避免在小屏幕上出现水平滚动条，对于差别不是很大的屏幕分辨率十分友好。
缺点 当屏幕分辨率差异过大时，因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，有些页面元素宽度被拉的很高，页面缩小后，一些字或者图片或者图表等会产生堆叠，显示效果不太好控制。
响应式布局（responsive layout ）
响应式布局是指网页分别为不同的屏幕分辨率定义不同的布局，同时在每个布局中，各元素大小采用百分比定义宽度，即页面元素宽度随着窗口调整而自动适配。可以看做是定义了几个不同尺寸的流式布局。
优点 能够适应pc、pad和移动端，在任何尺寸的屏幕上都能呈现完美的视觉效果
缺点 要匹配足够多的屏幕大小，需要设计多个版本，设计和开发工作量大
弹性布局（em/rem layout）
弹性布局翻译过来不是em/rem layout ，因为弹性布局采用的单位是em或者rem，为了直观，所以直接采用了单位缩写去区分。em和rem是一个相对长度单位，页面内各元素的尺寸采用em/rem做单位，em是相对其父元素大小，rem是始终相对于html大小，即页面根元素。
优点 弹性适配不同的分辨率，视觉效果比较好
缺点 em以父节点font-size大小为参考点，进行任何元素设置，都需要知道他父元素的大小，容易造成页面排版混乱，rem支持的浏览器比较少。
Flex布局
个人理解的，felx布局主要是用来定义页面内某些元素相对于父级元素的对齐、排序、分布等排版方式，通过调整父级内元素的宽高，从而在任何显示设备上实现对可用显示空间最佳填充的能力。
优点 能够很好的契合移动端，无需考虑分辨率问题，移动端flex布局占据主流
缺点 PC端网页兼容性不好，ie浏览器必须是10.0版本以上；对设计稿要求很高，需要是有规律的设计稿，比如栅格系统；网页内容较多时，flex布局不太好控制。
网友评论