流式布局
.outbox {
display: flex;
flex-wrap: wrap; //换行
}
.d_item {
width: 255px; //固定宽度
/* height: 120px; */
background: #ffffff;
border-radius: 3px;
padding: 14px 0px 20px 20px;
/* box-sizing: border-box; */
/* float: left; */
/* margin-left: 22px; */
margin: 10px; // 上下左右间距
}
媒体查询
@media screen and (max-width:480px){
.ads {
display:none;
}
}
@media screen and (min-width:600px) and (max-width:900px){ body {background-color:#f5f5f5;} }
上面代码表示的是:样式代码将被使用在除打印设备和设备宽度小于1200px下所有设备中。
@media not print and (max-width: 1200px){样式代码}