grid布局和rem的原理

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:;  控制整个网格在父元素里面的对齐方式.

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;