媒体查询
:即在不同屏幕的客户端下,显示效果不同。因为考虑屏幕大小不同,对布局要求有不同;
/*屏幕宽度大于800px*/
@media screen and (min- 800px){
.box{
200px;
height: 300px;
background-color: red;
}
}
/*屏幕宽度在500-800之间*/
@media screen and (min- 500px) and (max- 800px){
.box{
200px;
height: 300px;
background-color: yellow;
}
}
/*屏幕宽度小于500之间*/
@media screen and (max- 500px){
.box{
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- 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;