作为前端开发工程师，布局方式有很多种，针对不同的情况也有不同的处理方法，但是很多初学者不知道这些情况，那么今天就来说说，那些前端开发工程师是怎样必须知道的5种布局方式！1.静态布局（staticlayout）是传统的网页设计。网页上所有元素的大小均以px为单位。1.布局特性无论浏览器大小如何，网页的布局总是按照最初编写代码时的布局来显示。常规PC网站都是静态（定宽）布局，即设置了min-width，这样小于这个宽度就会出现滚动条，大于这个宽度就会居中显示内容并且将添加背景。这种设计在PC端很常见。2、设计方式PC：居中布局，所有样式使用绝对宽/高（px），设计一个Layout，调整屏幕宽高时，使用水平和垂直滚动条查看被覆盖的部分；移动设备：另外创建一个移动网站，单独设计布局，使用不同的域名，例如wap。orm..优点：这种布局方式对于设计师和CSS编写者来说是最简单的，不存在兼容性问题。缺点：很明显，就是不能根据用户的屏幕尺寸进行不同的表现。目前，大多数门户网站和企业PC宣传站点都采用这种布局方式。固定像素大小的网页是匹配固定像素大小显示器的最简单方法。但是这种方式并不是一种完全兼容未来网页的制作方式，我们需要一些方法来适配未知的设备。2.LiquidLayoutLiquid（也称“Fluid”）的特点是页面元素的宽度会根据屏幕分辨率适配和调整，但整体布局保持不变。代表作品栅栏系统（gridsystem）。网页中主要划分区域的大小使用百分比（与min-和max-属性一起使用），例如设置网页主体的宽度为80%，min-width为960px。图片也做类似的处理（width：100%，max-width一般设置为图片本身的大小，防止被拉伸扭曲）。1.布局特性当屏幕分辨率发生变化时，页面上元素的大小会发生变化，但布局不会发生变化。[这导致如果屏幕太大或太小，元素将无法正常显示。2.设计方式采用%百分比定义宽度，高度多为px固定，可根据视口和父元素的实时大小进行调整，尽可能适配各种分辨率。常结合max-width/min-width等属性来控制尺寸流量范围，以免过大或过小影响阅读。这种布局方式在Web前端发展的早期用于处理不同尺寸的PC屏幕（当时屏幕尺寸的差异不会太大），也是当今移动端常见的布局方式开发，但缺点也很明显：主要问题是如果屏幕比例跨度过大，在与原设计相比过小或过大的屏幕上都无法正常显示。因为宽度是用%百分比来定义的，而高度和文字大小大多是由px固定的，所以在大屏手机上的显示效果会变成有些页面元素的宽度被拉得很长，但是高度和文本大小仍然和以前一样（即，这些东西不能“流式传输”），显示非常刺耳。3.自适应布局（AdaptiveLayout）自适应布局的特点是针对不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态部分（页面元素的位置发生变化），但是在每个静态布局中，页面元素不会随着窗口大小的调整而改变。将自适应布局视为一系列静态布局。1.布局特性当屏幕分辨率发生变化时，元素在页面中的位置会发生变化，但大小不会发生变化。2、设计方式采用@media媒体查询，针对不同尺寸、不同媒体的设备切换不同的风格。在优秀的响应范围设计下，可以给适配范围内的设备最好的体验，实际布局依然固定在同一设备下。四、响应式布局（ResponsiveLayout）随着CSS3媒体查询技术的出现，响应式设计的概念应运而生。响应式设计的目标是保证一个页面在所有终端（各种尺寸的PC、手机、手表、冰箱网络浏览器等）上都能显示出令人满意的效果。实现上不局限于具体的方法，通常是流体布局+灵活布局的组合，再配合媒体查询技术。——定义不同屏幕分辨率的布局。同时，在每个布局中，应用了流体布局的概念，即页面元素的宽度随着窗口的调整而自动适应。即：创建多个流体布局，每个布局对应一个屏幕分辨率范围。将响应式布局视为流体布局和自适应布局设计概念的融合。响应能力几乎已经成为良好页面布局的标准。1.布局特性每个屏幕分辨率下都会有一种布局风格，即元素的位置和大小会发生变化。2、设计方式媒体查询+流式布局。通常使用@media媒体查询和网格系统（GridSystem）配合相对布局单元进行布局。实际上，它是通过CSS在单个网页上将不同样式返回给不同设备的技术的总称，例如综合响应和流量。优点：适配PC端和移动端，如果你足够耐心，效果会很完美。缺点：（1）媒体查询有局限性，即可以枚举，只能适应主流的宽高。(2)匹配足够多的屏幕尺寸，工作量不小，设计也需要多个版本。响应式页面会在头部添加这段代码：
