5种布局⽅式
⼀、静态布局（static layout）
即传统Web设计，⽹页上的所有元素的尺⼨⼀律使⽤px作为单位。
1、布局特点
不管浏览器尺⼨具体是多少，⽹页布局始终按照最初写代码时的布局来显⽰。常规的pc的⽹站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果⼩于这个宽度就会出现滚动条，如果⼤于这个宽度则内容居中外加背景，这种设计常见于pc端。
2、设计⽅法
PC：居中布局，所有样式使⽤绝对宽度/⾼度(px)，设计⼀个Layout，在屏幕宽⾼有调整时，使⽤横向和竖向的滚动条来查阅被遮掩部分；移动设备：另外建⽴移动⽹站，单独设计⼀个布局，使⽤不同的域名如wap.或m.。
优点：这种布局⽅式对设计师和CSS编写者来说都是最简单的，亦没有兼容性问题。
缺点：显⽽易见，即不能根据⽤户的屏幕尺⼨做出不同的表现。当前，⼤部分门户⽹站、⼤部分企业的PC宣传站点都采⽤了这种布局⽅式。固定像素尺⼨的⽹页是匹配固定像素尺⼨显⽰器的最简单办法。但这种⽅法不是⼀种完全兼容未来⽹页的制作⽅法，我们需要⼀些适应未知设备的⽅法。
⼆、流式布局（Liquid Layout）
流式布局（Liquid）的特点（也叫"Fluid")是页⾯元素的宽度按照屏幕分辨率进⾏适配调整，但整体布局不变。代表作栅栏系统（⽹格系统）。
⽹页中主要的划分区域的尺⼨使⽤百分数（搭配min-*、max-*属性使⽤），例如，设置⽹页主体的宽度为80%，min-width为960px。图⽚也作类似处理（width:100%, max-width⼀般设定为图⽚本⾝的尺⼨，防⽌被拉伸⽽失真）。
1.布局特点
屏幕分辨率变化时，页⾯⾥元素的⼤⼩会变化⽽但布局不变。【这就导致如果屏幕太⼤或者太⼩都会导致元素⽆法正常显⽰。
2.设计⽅法
使⽤%百分⽐定义宽度，⾼度⼤都是⽤px来固定住，可以根据可视区域 (viewport)和⽗元素的实时尺⼨进⾏调整，尽可能的适应各种分辨率。往往配合 max-width/min-width等属性控制尺⼨流动范围以免过⼤或者过⼩影响阅读。
这种布局⽅式在Web前端开发的早期历史上，⽤来应对不同尺⼨的PC屏幕（那时屏幕尺⼨的差异不会太⼤），在当今的移动端开发也是常⽤布局⽅式，但缺点明显：主要的问题是如果屏幕尺度跨度太⼤，那么在相对其原始设计⽽⾔过⼩或过⼤的屏幕上不能正常显⽰。因为宽度使⽤%百分⽐定义，但是⾼度和⽂字⼤⼩等⼤都是⽤px来固定，所以在⼤屏幕的⼿机下显⽰效果会变成有些页⾯元素宽度被拉的很长，但是⾼度、⽂字⼤⼩还是和原来⼀样（即，这些东西⽆法变得“流式”），显⽰⾮常不协调
三、⾃适应布局（Adaptive Layout）
⾃适应布局的特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应⼀个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态局部（页⾯元素位置发⽣改变），但在每个静态布局中，页⾯元素不随窗⼝⼤⼩的调整发⽣变化。可以把⾃适应布局看作是静态布局的⼀个系列。
1、布局特点
屏幕分辨率变化时，页⾯⾥⾯元素的位置会变化⽽⼤⼩不会变化。
2、设计⽅法
使⽤ @media媒体查询给不同尺⼨和介质的设备切换不同的样式。在优秀的响应范围设计下可以给适配范围内的设备最好的体验，在同⼀个设备下实际还是固定的布局。
四、响应式布局（Responsive Layout）
随着CSS3出现了媒体查询技术，⼜出现了响应式设计的概念。响应式设计的⽬标是确保⼀个页⾯在所有终端上（各种尺⼨的PC、⼿机、⼿表、冰箱的Web浏览器等等）都能显⽰出令⼈满意的效果，对CSS编写者⽽⾔，在实现上不拘泥于具体⼿法，但通常是糅合了流式布局+弹性布局，再搭配媒体查询技术使⽤。——分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应⽤流式布局的理念，即页⾯元素宽度随着窗⼝调整⽽⾃动适配。即：创建多个流体式布局，分别对应⼀个屏幕分辨率范围。可以把响应式布局看作是流式布局和⾃适应布局设计理念的融合。
响应式⼏乎已经成为优秀页⾯布局的标准。
1.布局特点
每个屏幕分辨率下⾯会有⼀个布局样式，即元素位置和⼤⼩都会变。
2.设计⽅法
媒体查询+流式布局。通常使⽤ @media媒体查询和⽹格系统 (Grid System)配合相对布局单位进⾏布局，实际上就是综合响应式、流动等上述技术通过 CSS给单⼀⽹页不同设备返回不同样式的技术统称。
优点：适应pc和移动端，如果⾜够耐⼼，效果完美。
缺点：（1）媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽⾼。（2）要匹配⾜够多的屏幕⼤⼩，⼯作量不⼩，设计也需要多个版本。
响应式页⾯在头部会加上这⼀段代码：
五、弹性布局（rem/em布局）
1. rem/em区别：rem是相对于html元素的font-size⼤⼩⽽⾔的，⽽em是相对于其⽗元素。
2.使⽤ em或 rem单位进⾏相对布局，相对%百分⽐更加灵活，同时可以⽀持浏览器的字体⼤⼩调整和缩放等的正常显⽰，因为em是相对⽗级元素的原因没有得到推⼴。【中国站点制作⽹页的时候，习惯⽤CSS强制定义字体⼤⼩，保证每个⼈都看到⼀致的效果，包括⽹易、搜狐这些门户⽹站在内的⼤部分站点，⽤的都是绝对单位px（像素）。但是，如果从⽹站易⽤性⽅⾯考虑，字体⼤⼩应该是可变的，⼀些视⼒不是那么好的⼈需要放⼤字体才能看得清页⾯内容。然⽽，占据⼤部分浏览器市场的IE⽆法调整那些使⽤px作为单位的字体⼤⼩。国外⼈⼠⾮常重视⽹站的易⽤性，相当⼀部分外国站点已经使⽤em作为
字体单位。
3.这类布局的特点是，包裹⽂字的各元素的尺⼨采⽤em/rem做单位，⽽页⾯的主要划分区域的尺⼨仍使⽤百分数或px做单位（同「流式布局」或「静态/固定布局」）。早期浏览器不⽀持整个页⾯按⽐例缩放，仅⽀持⽹页内⽂字尺⼨的放⼤，这种情况下。使⽤em/rem做单位，可以使包裹⽂字的元素随着⽂字的缩放⽽缩放。
4.浏览器的默认字体⾼度⼀般为16px，即1em:16px，但是 1:16的⽐例不⽅便计算，为了使单位em/rem更直观，CSS编写者常常将页⾯跟节点字体设为62.5%，⽐如选择⽤rem控制字体时，先需要设置根节点html的字体⼤⼩，因为浏览器默认字体⼤⼩16px*62.5%=10px。这样
css实现三列布局1rem便是10px，⽅便了计算。
5.⽤em/rem定义尺⼨的另⼀个好处是更能适应缩进/以字体单位padding或margin／浏览器设置字体尺⼨等情况（因为em/rem相对于字体⼤⼩，会同步改变）。例如：p{ text-indent: 2em; }。
6.使⽤rem单位的弹性布局在移动端也很受欢迎。
7.其实在移动端使⽤所谓的弹性布局，是⽐较勉强的。移动端弹性布局流⾏起来的原因归根结底是rem单位对于（根据屏幕尺⼨）调整页⾯的各元素的尺⼨、⽂字⼤⼩时⽐较好⽤。其实，使⽤vw、vh等后起
之秀的单位，可以实现完美的流式布局（⾼度和⽂字⼤⼩都可以变得“流式”），弹性布局就不再必要了。
结论
1.如果只做pc端，那么静态布局（定宽度）是最好的选择；
2.如果做移动端，且设计对⾼度和元素间距要求不⾼，那么弹性布局（rem+js）是最好的选择，⼀份css+⼀份js调节font-size搞定；
3.如果pc，移动要兼容，⽽且要求很⾼那么响应式布局还是最好的选择，前提是设计根据不同的⾼宽做不同的设计，响应式根据媒体查询做不同的布局。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。