移动端中多列布局问题2

    移动端中多列布局问题：
        详见01-移动端多列.html
    响应式布局：
        能够自动检测设备宽度，从而改变已有的布局
        自动检测--------媒体查询（技术）
    媒体查询语法：
        @media screen and (min-width:1024px) and (max-width:1366px){
            body{
                background-color:red;
            }
        }
        @media        声明媒体查询
        screen        检测的设备类型
        and           关键字
        （）           查询条件
        含义：生命一个媒体查询，检测设备宽度介于1024-1366之间，改变body背景颜色
        注意：媒体查询语句，放在css最后面写
    

    渐变：
        颜色在一个方向上向另一个颜色逐渐变化的过程
        分类：
            线性渐变：
            径向渐变：
        线性渐变：
            background:linear-gradient(to 方向次,col1,col2，col3)
                to left      到左边
                col1         渐变开始的颜色
                col3         渐变结束的颜色
            渐变的取值
                1、沿着一个边道另一个边
                    to bottom       从上边到下边（默认值）
                    to right        从左边到右边
                2、从一个角道另一个角
                    to right top      从左下角到右上角      写法等价于        to top right
                3、沿着某一个度数进行渐变
                    45deg：表示45度
                    取值可以为正值（顺时针方向），也可以是负值（逆时针方向）
         径向渐变：
            background：radial-gradient(center,shape,size,col1,col2,col3)
                center           径向渐变渐变中心（默认在元素正中心）
                    更改渐变中心x y
                        x-----------表示水平方向上的取值
                        y-----------表示垂直方向上的取值
                        注意：更改渐变中心一定要加上浏览器前缀，否则不生效
                            background: -webkit-radial-gradient(100px 200px,red,green,blue);
                shape            渐变形状
                    取值：
                        circle       正圆
                        ellipsis     椭圆(默认值)
                size             渐变大小（渐变到哪里结束）
                    closest-side---------最近的边
                    farthest-side---------最远的边
                    closest-corner-------最近的角
                    farthest-corner-------最远的角
                col1             渐变开始的颜色
                col3             渐变结束的颜色
        重复渐变：
            重复线性渐变：repeating-linear-gradient(red,green 10%,yellow 20%)
            重复径向渐变：repeating-radial-gradient(red,green 10%,yellow 20%)