<!--  

rem的原理：

根据html  font-size值而定

插件来进行html的font-size的值的改变。

适应插件flexible.js进行适配

步骤：

1：先把html自身所带的控制视口的meta标签 先删除

2：引入flexible.js

在head标签里面   <script src="路径"></script>

3:计算流程：

a: ps量出高度88px

            b: 88px / 100px == .88rem;

-->

<!--  

grid布局 针对的是子元素布局。

1：形成一个网格结构(父元素添加)：

        display:grid;

2:划分行和列

        grid-template-columns:

        grid-template-rows:

如果是3个值 代表3行或3列 能接受具体的px 也能是百分比

划分行和列的时候的关键字和方法:

a:    repeat(重复的次数,重复的值)

b:    auto-fill关键字( 自动填充 )

c:    fr关键字(列宽片段)

d:    minmax(最小值,最大值)

3:  grid-gap:20px 30px;简写形式

4:指定某个项目所在的区域:

        grid-template-areas:

                        'a a a'

                        '. . b'

                        '. c c';

注:  grid-template-areas必须和 grid-area共同使用

grid-area放在具体某个项目里面的,指定项目名称.

5:指定顺序:

        grid-auto-flow:row/column

6:内容在项目里面的对齐方式:

        place-items:

注:网格内部的内容固定的大小 百分比的时候 左右的对齐方式会产生BUG

7: place-content:;控制整个网格在父元素里面的对齐方式.

-->