前端五种布局

首先，前端的五种布局包括
固定布局，流式布局，弹性布局，自适应布局和响应式布局

固定布局：
最早期2000年左右的时候，因为大家都是使用的大脑袋电脑，显示屏或大或小都差不多，所以对于布局的要求不是很高，那个时候流行一种布局叫固定布局

固定布局的代表性单位为像素（px），一个像素对应的就是像素屏上面的一个小像素点
像素对应物理的像素点，所以他是一种绝对单位。
固定布局的缺点：
对于小屏，可能内容显示不全
对于大屏，可能左右两侧有空白（如果为内容居中的话）

流式布局：
为了解决固定布局的缺陷，推出了流式布局
流式布局的单位是百分比
流式布局顾名思义，像流水一样，无论如何改变都是占一样的比例
流式布局的缺点：
不能改变字体的大小

弹性布局：
弹性布局的单位em和rem
em是根据父组件的font-size为1em
rem是根据根节点（html）的font-size为1rem
通过对font-size的设定来统一页面组件的长宽

自适应布局：
类似于b站的那种布局
通过写网站的多个分身（多套布局模板）来达到对客户端的自适应
举例：
登录b站，将网站宽度缩小到一定比例，刷新页面会直接展示移动端布局
一般会通过不同域名来进行区分
移动端一般会用的域名 mobile.xxx.com m.xxx.com wap.xxx.com
自适应布局的缺点：
维护成本很高
可以通过px转rem达到伪自适应
插件：postcss-px2rem-exclude

响应式布局：
一镜到底，从网页端到移动端，不需要刷新更换域名
通过打断点的方式，对网页的一些元素的样式进行修改或者隐藏，达到适应目前屏幕的目的
响应式的缺点：
所有的数据都需要加载，无论你能不能看见
媒体查询方法：

// 视口宽度<=1150px时隐藏
@media screen and (max-width: 1150px) {
  .main .tags-container {
    width: auto;
  }
  .tags-container .right-part {
    display: none;
  }
  .tags-container .left-part div {
    margin: 0 auto;
  }
  .tags-container .el-col-16 {
    width: 100vw;
  }
}