5种响应式布局方式

一、flex布局

优点: 代码简单，布局方便
缺点
如果中间有内容，缩到最小就不会在小了
且左右侧的宽度变小了

二、父相子绝

优点
结合使用media可以实现响应式布局
缺点
代码写法复杂，布局较繁琐
如果不使用media平分屏幕，宽度小于600的情况下，右侧会覆盖左侧

三、grid布局

Flex布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局，
Grid 布局则是将容器划分成“行"和“列”，产生单元格，然后指定"项目所在”的单元格，可以看作是二维布局
Grid布局远比 Flex布局强大。(不过存在兼容性问题)
知识点比较多, 学习成本相对较高, 目前兼容性不如flex布局!

属性

容器属性

grid-template-columns grid-template-rows

规定公有几行，几列，每行，每列宽多少？
grid-template-columns:100px 100px 100px; // 显示为三列每一列宽度100px
grid-template-columns:repeat(3,100px); //同上
也可以固定格大小，然后优先占满整个宽度
grid-template-columns: repeat(auto-fill,100px);
.auto-fill，有时，单元格的大小是固定的，但是容器的大小不确定，这个属性就会自动填充
也可以按份数规定列宽
fr，比例关系，fraction ，意为"片段”，表示某一行或列在总宽度和总高度中占的份数
grid-template-columns:repeat(4,1fr); // 宽度平均分成四等份
grid-template-columns:1fr 2fr 3fr; // 列宽这样是分成6份各占 1 2 3 份 效果如下图
还可以设置最小和最大的大小范围:
grid-template-columns: 1fr minmax(150px，1fr); // 第一个参数最小值,第二个最大值,表示第二列最小150px，最大1fr。
还可以请浏览器自己决定长度
auto，表示由浏览器自己决定长度
grid-template-columns: 100px auto 100px;
还可以定义网格线
网格线．可以用方括号定义网格线名称，方便以后给盒子定位使用
grid-template-columns: [c1] 100px [c2] 100px [c3] 100px [c4];

column-gap和row-gap

定义格与格之间的间距
如果column-gap和row-gap间距一致，可简写为: gap:xxx

grid-auto-flow

划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是"先行后列".即先填满第一行，再开始放入第二行(就是子元素的排放顺序)
grid-auto-flow： row 先行后列
grid-auto-flow： column 先列后行

justify-items(水平方向)/ align-items(垂直方向)

设置单元格内容的水平和垂直的对齐方式
值为: start | end | center | stretch
同时设置两个属性: 简写 place-items : start end； 这是两个属性的简写

justify-content (水平方向)/ align-content(垂直方向)

设置整个内容区域（所有的项目的总和）的水平和垂直的对齐方式
取值: start | end | center | stretch | space-around | space-between | space-evenly;

项目属性

grid-column-start / grid-column-end grid-row-start / grid-row-end

一句话解释，用来指定item的具体位置，根据在哪根网格线
grid-column-start:1;
grid-column-end:3;
表示从第一个网格线，跨到第三个网格线之前，也就是横跨1、2两列
grid-column: span 2;
grid-column-end:3;
简写: grid-column: 1 / 3;
grid-column-start:1;
grid-column-end:3;
grid-row-start:1;
grid-row-end:3;
跨两行，跨两列的方形区域
简写: grid-area: 1 / 1 / 3 / 3

justify-self / align-self

当前单元格内容的水平和垂直对齐方向
place-self
同时设置一个单元格内容的水平和垂直方向对齐方式

https://www.jianshu.com/p/3762f214cd6f

四、float布局

容易被挤压换行

五、使用rem作单位，等比缩放

首先，给根元素html设置一个字体大小
然后，其他尺寸单位全部用 rem
然后，监听屏幕的大小
然后，根据屏幕的大小按比例改变根节点字体的大小
因为 rem 的特性，其他的尺寸都是根据根节点字体的大小设定的，所以，根节点字体大小一变，其他所有尺寸都会按比例变大、或小。
大部分浏览器的字体有个最小值：12px。也就是缩小到 12px 后，字体不会继续缩小。