Media Inquiries waterfall

Media Inquiries

: That is, in the end customer screen displays different results. Considering that the screen size is different for different layout requirements;

　　　　
　　　　/ * * Screen width is greater than 800px /
　　　　@media Screen and (min-width: 800px) {
            .box{
                width:200px;
                height: 300px;
                background-color: red;
            }

        }
　　　　　/ * Screen width between 500-800 * /
        @media screen and (min-width: 500px) and (max-width: 800px){
            .box{
                width:200px;
                height: 300px;
                background-color: yellow;
            }
        }
        / * * 500 between the screen width is smaller than /
        @media screen and (max-width: 500px){
            .box{
                width:200px;
                height: 300px;
                background-color: green;
            }
 
        }

　　css less media queries usage

 @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;
          }
        }
    }

// can be nested

　　css3 waterfall

COLUMNS columns

/ * Number of rows and columns of fixed width * /
-moz-columns:200px 3;
-webkit-columns:200px 3;
columns:200px 3;

/ * A fixed column width, the width of the liquid container according to the number of distribution columns * /
-moz-columns:200px;
-webkit-columns:200px;
columns:200px;　　

column-gap clearance

/ * * 40px gap was fixed column /
-moz-column-gap:40px;
-webkit-column-gap:40px;
column-gap:40px;

/ * Gap column column-gap: normal; when the font-size of 14px, column gap column-gap: Calcd is also normal 14px * /
-moz-column-gap:normal;
-webkit-column-gap:normal;
column-gap:normal;