前端常见的布局

静态布局

1. 传统的网站形式，网页上的所有元素的尺寸一律使用px作为单位

自适应布局

1. 分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。
2. 屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化。

流式布局

1. 流式布局也叫百分比布局，页面元素的宽度按照屏幕进行适配调整，主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示 。
2. 屏幕分辨率变化时，页面里面元素的大小会变化而位置不会变化,这就导致如果屏幕太大或者太小都会导致元素无法正常显示.
3. 流式布局常见的设计模板：
   • 左侧固定+右侧自适应
   • 左右固定宽度+中间自适应(参考京东手机版)
4. 优点：元素的宽高用百分比做单位，元素宽高按屏幕分辨率调整，布局不发生变化
5. 缺点：屏幕尺度跨度过大的情况下，页面不能正常显示

响应式布局

1. 可以把响应式布局看作是流式布局和自适应布局设计理念的融合
2. 利用媒体查询可以检测到屏幕的尺寸(主要检测宽度)，并设置不同的CSS样式，就可以实现响应式的布局
3. 大名鼎鼎的bootstrap就是响应式布局的专家；React官方也热衷于响应式布局设计:

弹性布局

1. 弹性布局是CSS3引入的强大的布局方式，flex