⽹页布局的⼏种⽅式
固定布局
  为⽹页设置⼀个固定的宽度，通常以px做为长度单位，常见于PC端⽹页。
  这种布局具有很强的稳定性与可控性，也没有兼容性问题，但不能根据⽤户的屏幕尺⼨做出不同的表现。即如果⽤户的屏幕分辨率⼩于这个宽度就会出现滚动条，如果⼤于这个宽度则会留下空⽩。
流式布局（Liquid Layout）
  为⽹页设置⼀个相对的宽度，页⾯元素的⼤⼩按照屏幕分辨率进⾏适配调整，但整体布局不变，通常以百分⽐做为长度单位（通常搭配min-*、max-* 属性控制尺⼨流动范围以免过⼤或者过⼩导致元素⽆法正常显⽰），⾼度⼤都是⽤px来固定住。流式布局的代表作栅格系统（⽹格系统）。
  例如设置⽹页主体的宽度为80%，min-width为960px。图⽚也作类似处理（width:100%, max-width⼀般设定为图⽚本⾝的尺⼨，防⽌被拉伸⽽失真）。
  缺点：因为宽度使⽤%百分⽐定义，但是⾼度和⽂字⼤⼩等⼤都是⽤px来固定，所以在⼤屏幕下显⽰效果会变成有些页⾯元素宽度被拉的很长，但是⾼度、⽂字⼤⼩还是和原来⼀样，显⽰⾮常不协调
栅格化布局
  将⽹页宽度⼈为的划分成均等的长度，然后排版布局时则以这些均等的长度做为度量单位，通常利⽤百分⽐做为长度单位来划分成均等的长度。
  ⽐如像 bootstrap，foundation 这些框架采⽤的就是栅格系统，只要给页⾯元素添加其栅格系统指定的类名，就能达到想要的响应式布局效果。
  bootstrap 的栅格系统是通过⼀系列的⾏和列的组合来创建页⾯布局，它的栅格系统最⼤分为12份:
不过版本bootstrap3 与 bootstrap4 实现栅格系统⽅式不⼀样, bootstrap3 为了兼容 IE，采⽤的是浮动⽅式来实现栅格系统：
即每⼀个栅格都是⽤左浮动和百分⽐来进⾏排版，当窗⼝宽度改变，对应改变 container 容器的宽度，对应栅格宽度⾃然也跟着改变：
bootstrap4 放弃了对IE的⽀持，采⽤的是最新的伸缩布局⽅式：
⾃适应布局（Adaptive Layout）
网页float是什么意思  ⾃适应布局的特点是分别为不同的屏幕分辨率定义布局，即为不同类别的设备创建不同的静态布局，每个静态布局对应⼀个屏幕分辨率范围。改变屏幕分辨率可以切换调⽤相应的布局（页⾯元素位置发⽣改变⽽⼤⼩不变），但在每个静态布局中，页⾯元素不随窗⼝⼤⼩的调整发⽣变化。可以把⾃适应布局看作是静态布局的⼀个系列。
  在这种布局⽅式下，当视⼝⼤⼩低于设置的最⼩视⼝时，界⾯会出现显⽰不全，溢出，并出现滚动条。⽽且当需求改变时，可能会改动多套代码。
  使⽤⾃适应布局时，⾸先在⽹页代码的头部，加⼊⼀样 viewport 标签：
<meta name="viewport" content="width=device-width, initial-scale=1"/>
设置⽹页宽度默认等于屏幕宽度（width=device-width），原始缩放⽐例（initial-scale=1）为1.0，即⽹页初始⼤⼩占屏幕⾯积的100%。然后 CSS 代码不能使⽤绝对⼤⼩，即不能指定像素 px 宽度，⽽只能使⽤相对⼤⼩ em 或者 %百分⽐、rem等。
响应式布局
  响应式布局的⽬标是确保⼀个页⾯在所有终端上（各种尺⼨的PC、⼿机、ipad等）都能显⽰出令⼈满意的效果。通过检测设备信息，决定⽹页布局⽅式，即⽤户如果采⽤不同的设备访问同⼀个⽹页，有可能会看到不⼀样的展⽰效果，⼀般情况下是检测设备屏幕的宽度来实现。可以把响应式布局看作是流式布局和⾃适应布局设计理念的融合。
  应⽤响应式布局，⾸先要使⽤视图的 meta 标签来进⾏重置：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
然后使⽤ @media 媒体查询给不同尺⼨和介质的设备切换不同的样式。同⾃适应布局⼀样，在书写 CSS 样式时，元素宽度不能使⽤绝对宽度，⽽要使⽤相对⼤⼩。
  Media Queries 是响应式设计的核⼼，它根据条件告诉浏览器如何为指定视图宽度渲染页⾯。在优秀的响应范围设计下可以给适配范围内的设备最好的体验，在同⼀个设备下实际还是固定的布局。但媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽⾼。要匹配⾜够多的屏幕⼤⼩，⼯作量不⼩，⽽且页⾯中会出现隐藏元素的操作，这样代码就⽐较冗余，加载时间加长，此外设计也需要多个版本。
⾃适应布局和响应式布局对⽐：
  不同点：
    1.⾃适应需要开发多套界⾯；响应式只需开发⼀套界⾯。
    2. ⾃适应对页⾯的屏幕适配实在⼀定的范围，⽐如：pc 端 > 1024px; 平板 768 ~ 1024px; ⼿机端 < 768px; 响应式是⼀套页⾯同时兼容在 pc 端、平板和⼿机端的各个不同视⼝，⽽不是为每个终端做⼀个特定的版本，所以需要考虑的状态⾮常多。
  相同点：　
    都是通过检测视⼝分辨率，使页⾯适应不同分辨率的视⼝。
弹性布局（rem/em布局）
  弹性布局跟流布局很像，⽹页宽度不固定，使⽤ em 或 rem 单位进⾏相对布局，避免了使⽤像素 px 布局在⾼分辨率下⼏乎⽆法辨识的缺点，相对%百分⽐更加灵活，同时可以⽀持浏览器的字体⼤⼩调整和缩放等的正常显⽰。但弹性布局也有局限性，如果不对这种布局设置⼀个最⼩宽度，当⽤户缩⼩窗⼝到⾜够⼩时会造成布局严重错位。
  关于 em / rem / px / % ... 的使⽤戳这⾥
伸缩布局（Flex box）
  使⽤css3 Flex 系列属性进⾏相对布局，⽤来为盒模型提供最⼤的灵活性。对于富媒体和复杂排版的⽀持⾮常⼤，但是存在兼容性问题。任何⼀个容器都可以指定为flex 布局，⾏内元素也可以使⽤。
  注意：设为 flex 布局后，⼦元素的 float、clear、vertical-align 属性将失效。
注：以上⼏种布局⽅式并不是独⽴存在的，实际开发过程中往往是相互结合使⽤的，根据项⽬的需求，取各⾃之所长。

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