媒体查询 瀑布流

Posted 2020-11-28 anbozhu7

媒体查询

：即在不同屏幕的客户端下，显示效果不同。因为考虑屏幕大小不同，对布局要求有不同；

　　　　
　　　　/*屏幕宽度大于800px*/
　　　　@media screen and (min-width: 800px){
            .box{
                width:200px;
                height: 300px;
                background-color: red;
            }

        }
　　　　　/*屏幕宽度在500-800之间*/
        @media screen and (min-width: 500px) and (max-width: 800px){
            .box{
                width:200px;
                height: 300px;
                background-color: yellow;
            }
        }
        /*屏幕宽度小于500之间*/
        @media screen and (max-width: 500px){
            .box{
                width:200px;
                height: 300px;
                background-color: green;
            }
 
        }

　　css less 中 媒体查询用法

 @media screen {
        .card-list {
          -moz-column-count: 3; /* Firefox */
          -webkit-column-count: 3; /* Safari 和 Chrome */
          column-count: 3;
        }
        @media (min-width: 1367px) {
          .card-list {
            -moz-column-count: 4; /* Firefox */
            -webkit-column-count: 4; /* Safari 和 Chrome */
            column-count: 4;
          }
        }
    }

// 可以嵌套

　　css3 瀑布流

columns 列

/*列数及列宽固定*/
-moz-columns:200px 3;
-webkit-columns:200px 3;
columns:200px 3;

/*列宽固定，根据容器宽度液态分布列数*/
-moz-columns:200px;
-webkit-columns:200px;
columns:200px;　　

column-gap 间隙

/*固定列间隙为40px*/
-moz-column-gap:40px;
-webkit-column-gap:40px;
column-gap:40px;

/*列间隙column-gap:normal；font-size为14px时，列间隙column-gap:normal的计算值也为14px*/
-moz-column-gap:normal;
-webkit-column-gap:normal;
column-gap:normal;