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

Posted 2023-02-08 weixin_43553755

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

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

一、静态布局：

尺寸上一律使用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和移动端，

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

总结

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