前端页⾯的⼏种常⽤布局
⼀ 、静态页⾯布局
传统页⾯布局，⽹页上的所有元素的尺⼨⼀律使⽤px作为单位。
静态页⾯布局通常有⼏下⼏种：
1、表格布局
2、层布局
3、div+css样式表布局
表格布局：
表格布局容易把握，是最简单的⼀种总局⽅式，适⽤于初学者。
设计⽹页的第⼀步是设计版⾯布局。所谓布局，就是以最适合浏览的⽅式将图⽚、⽂字以及表单等元素排放在页⾯的不同位置。⽹页设计常⽤布局⽅法是表格布局。另外⼀种⽅便的⼯具，就是使⽤框架。框架的作⽤就是把浏览器窗⼝划分为若⼲个区域，每个区域可以分别显⽰不同的⽹页。
css表格样式
案例：①在⽹页中插⼊表格，不显⽰边框只⽤来布局；②在单元格内插⼊⽂字、·图⽚，设置丰富的效果；③通过拆分单元格或者插⼊嵌套表格来细化某些单元格内部的布局。
层布局：
层布局较难把握，经常会受屏幕的分辨率影响，⽹页中很少⽤，主要⽤于浮动⼴告。
div+css样式表布局：
div+css样式表布局，难度较⼤，作者需了解⼀定数量的html代码。是应⽤较⼴泛的⼀种，也是最难的⼀种布局。
1 特点：不管浏览器尺⼨具体是多少，⽹页布局始终按照最初写代码时的布局来显⽰。常规的pc的⽹站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果⼩于这个宽度就会出现滚动条，如果⼤于这个宽度则内容居中外加背景，这种设计常见与pc端。
2设计⽅法：
PC：居中布局，所有样式使⽤绝对宽度/⾼度(px)，设计⼀个Layout，在屏幕宽⾼有调整时，使⽤横向和竖向的滚动条来查阅被遮掩部分；在移动端开发中采⽤静态布局的两种⽅式：
（1）在viewport meta标签上设置width=320，页⾯的各个元素也采⽤px作为单位。通过⽤JS动态修改标签的initial-scale使得页⾯等⽐缩放，从⽽刚好占满整个屏幕。（见前端开发-web app 变⾰之rem）
（2）设在viewport meta标签上设置content"width=640,user-scalable=no，页⾯的各个元素也采⽤px作为单位。由于640px超出了⼿机宽度，浏览器会⾃动缩⼩页⾯⾄刚好全屏。
优点：这种布局⽅式对设计师和CSS编写者来说都是最简单的，亦没有兼容性问题。
缺点：显⽽易见，即不能根据⽤户的屏幕尺⼨做出不同的表现。
⼆、流式布局
流式布局（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 给单⼀⽹页不同设备返回不同样式的技术统称。
五、弹性布局（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。这样1rem便是10px，⽅便了计算。
5. ⽤em/rem定义尺⼨的另⼀个好处是更能适应缩进/以字体单位padding或margin／浏览器设置字体尺⼨等情况（因为em/rem相对于字体⼤⼩，会同步改变）。例如：p{ text-indent: 2em; }。
6. 使⽤rem单位的弹性布局在移动端也很受欢迎。
7. 其实在移动端使⽤所谓的弹性布局，是⽐较勉强的。移动端弹性布局流⾏起来的原因归根结底是rem单位对于（根据屏幕尺⼨）调整页⾯的各元素的尺⼨、⽂字⼤⼩时⽐较好⽤。其实，使⽤vw、vh等后起之秀的单位，可以实现完美的流式布局（⾼度和⽂字⼤⼩都可以变
得“流式”），弹性布局就不再必要了

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