css（十二）多列、媒体查询

columns多列（瀑布流）
columns：复合属性设置列的宽度和列数
column-width：指定列的宽度
column-count：指定元素应该被分割的列数。
column-gap：指定列与列之间的间隙
column-rule：复合属性（简写）设置列之间的边框样式
column-rule-width：指定两列间边框的厚度
column-rule-style：指定两列间边框的样式
column-rule-color：指定两列间边框的颜色
column-fill：指定如何填充列（列的高度是否统一）
column-span：指定元素要跨越多少列
示列

 div{
        column-count:3;
        column-gap:15px;
        column-rule:1px solid #ccc;
    }

媒体查询（响应式）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>响应式</title>
    <!-- 外部引入样式 -->
    <!-- <link rel="stylesheet" media="(min-width:639px)" type="text/css" href=""> -->
    <style type="text/css">
        @media screen and (max-width:639px){
           body{background-color:green};
        }
        @media screen and (min-width:639px) and (max-width:1000px){
           body{background-color:#FF9799};
        }
        @media screen and (min-width:1000px){
           body{background-color:#66D9D1};
        }
        ul{
            list-style:none;
            padding-left:0px;
            display:flex;
            flex-direction:row;
        }
        li:nth-child(1){
            background:#39ADD1;
        }
        li:nth-child(2){
            background:#3079AB;
        }
        li:nth-child(3){
            background:#982551;
        }
        li:nth-child(4){
            background:#E15258;
        }
        li:nth-child(5){
            background:#CC6699;
        }
        li:nth-child(6){
            background:#52AC43;
        }
        li{
            text-align:center;
            width:100%;
            height:40px;
            line-height:40px;
        }
        @media screen and (max-width:768px){
            ul{
                display:flex;
                flex-wrap:wrap;
            }
            li{
                width:50%;
            }
        }
        @media screen and (max-width:480px){
            ul{
                display:flex;
                flex-direction:column;
            }
            li{
                width:100%;
            }
        }

    </style>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>Sass</li>
        <li>Ruby</li>
        <li>Mongo</li>
    </ul>
</body>
</html>

css（十二）多列、媒体查询

猜你喜欢