「布局」静态布局、自适应布局、流式布局、响应式布局、弹性布局简析

Posted 2023-04-18

参考技术A

近期学习，有很多感想，有时候看似相近的概念，其实意义却不相同。所以学习要针对不同的名词有明确的区分意识。

抽空时间，打算学习下display:flex;本以为就是一个小小的知识点，正式去研究的时候，才发现display:flex;有很多内容，能实现很多效果。比如三栏布局（左右两栏固定，中间栏自适应），圣杯布局。

后来想着经常听到流式布局，自适应布局，响应式布局，他们有什么区别呢，就去搜了许多内容查看，才发现每种布局都有优缺点和不同使用场景。

静态布局 ：给页面元素设置固定的宽度和高度，单位用px，当窗口缩小，会出现滚动条，拉动滚动条显示被遮挡内容。针对不同分辨率的手机端，分别写不同的样式文件。

自适应布局 ：创建多个静态布局，每个静态布局对应一个屏幕分辨率范围，使用 @media媒体查询 技术。

流式布局 ：元素的宽高用 百分比 做单位，元素宽高按屏幕分辨率调整，布局不发生变化。屏幕尺度跨度过大的情况下，页面不能正常显示。

响应式布局 ：采用自适应布局和流式布局的综合方式，为 不同屏幕分辨率范围 创建 流式布局 。

弹性布局 ：要点在于使用 <tt>em和rem单位</tt> 来定义元素宽度，与流式布局有极大的相似性，但也有不同之处，主要区别在于弹性布局的尺寸主要根据字体大小而变化。

至于display:flex;相关知识，我就不赘述了，推荐阮一峰的博客 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

具体选择哪种布局方式，要根据需求确定。

静态布局流式布局自适应布局弹性布局响应式布局

静态布局、流式布局、自适应布局、弹性布局、响应式布局

前端的布局主要有：
静态布局、流式布局、自适应布局、弹性布局、响应式布局等。

一、静态布局：

尺寸上一律使用px;同时限制外层容器的大小；中间的宽度有最大(max-width)最小(min-width)限制，如果屏幕宽度大于max-width,那就两边自适应，如果屏幕宽度小于min-width,那就会出现x轴方向的滚动条。

优点：不存在浏览器兼容的问题。

缺点：pc端和移动端不好共用一套代码。需要做两套一套pc一套移动端。

应用场景：主要是在pc端使用。如：百度pc门户页面。

二、流式布局：

流式布局又称为百分比布局。随着屏幕的变化，页面的布局没有发生大的变化，进行适配调整，如栅栏，各模块之间使用了百分比。可以理解为静态布局的升级版，流式布局 = 静态布局 + 百分比布局；

优点：元素的宽高用百分比做单位，元素宽高随分辨率调整，布局变化不大。

缺点：屏幕尺度跨度过大的情况下，px部分不变化，百分比部分变化大，会显得页面展示非常不协调。

应用场景：左侧固定+右侧自适应、左右固定宽度+中间自适应，也主要用在pc端。

三、自适应布局：

通过@media媒体查询，设置不同分辨率下设置对应的样式，可以理解为500～800是一种样式的展示，800～1000又是一种样式的展示，1000～1200又是一种样式设置。

优点：可以在已知的范围内实现对应屏幕的自适应。

缺点：对于未知的宽度不能自适应。

应用场景：pc和移动都可以使用

四、弹性布局(flex)：

css3引入的布局方式

优点：方便、简单

缺点：存在兼容性问题。

应用：对于pc端的整体布局应用的不多，适合用在pc布局的局部，主要是用在移动端整体布局。

五、响应式布局：

响应式布局 = 自适应布局 + 流式布局 ；主流的做法是通过js计算根节点的rem来实现在不同屏幕下实现响应式布局，可以理解为自适应布局的精细版本。是目前最优秀的布局。

优点：适配pc和移动端，

缺点：对于一些屏幕情况需要特殊的处理。

总结

其他的布局相比与以上布局要么是换了名字，要么是大同小异。