1.断点
xs: < 576px
sm: 576px ~ 768px
md: 768px ~ 992px
lg: 992px ~ 1200px
xl: > 1200px
2.一般策略
@media (max-width: 576px) {
.col {
width: 100%;
}
}
@media (min-width: 577px) and (max-width: 768px) {
.col {
width: 50%;
}
}
@media (min-width: 769px) and (max-width: 992px) {
.col {
width: 25%;
}
}
@media (min-width: 993px) and (max-width: 1200px) {
.col {
width: 16.6666666667%;
}
}
@media (min-width: 1201px) {
.col {
width: 8.333333333%;
}
}3.pc first策略
.col {
width: 8.333333333%;
}
@media (max-width: 1200px) {
.col {
width: 16.6666666667%;
}
}
@media (max-width: 992px) {
.col {
width: 25%;
}
}
@media (max-width: 768px) {
.col {
width: 50%;
}
}
@media (max-width: 576px) {
.col {
width: 100%;
}
}4.mobile first 策略
/*mobile first*/
.col {
width: 100%;
}
@media (min-width: 576px) {
.col {
width: 50%;
}
}
@media (min-width: 768px) {
.col {
width: 25%;
}
}
@media (min-width: 992px) {
.col {
width: 16.6666666667%;
}
}
@media (min-width: 1200px) {
.col {
width: 8.33333333%;
}
}
5.全部源码：当页面大小不同时显示不同的图片布局
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>媒体查询--策略</title>
<style>
/*css reset*/
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
padding-top: 200px;
}
img {
width: 100%;
height: 100%;
}
.row {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.col {
padding-top: 10px;
padding-bottom: 10px;
background-color: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.2);
}
/*mobile first*/
.col {
width: 100%;
}
@media (min-width: 576px) {
.col {
width: 50%;
}
}
@media (min-width: 768px) {
.col {
width: 25%;
}
}
@media (min-width: 992px) {
.col {
width: 16.6666666667%;
}
}
@media (min-width: 1200px) {
.col {
width: 8.33333333%;
}
}
</style>
</head>
<body>
<div class="row">
<div class="col"><img src="img/user.png" ></div>
<div class="col"><img src="img/user.png" ></div>
<div class="col"><img src="img/user.png" ></div>
<div class="col"><img src="img/user.png" ></div>
<div class="col"><img src="img/user.png" ></div>
<div class="col"><img src="img/user.png" ></div>
<div class="col"><img src="img/user.png" ></div>
<div class="col"><img src="img/user.png" ></div>
<div class="col"><img src="img/user.png" ></div>
<div class="col"><img src="img/user.png" ></div>
<div class="col"><img src="img/user.png" ></div>
<div class="col"><img src="img/user.png" ></div>
</div>
</body>
</html>
当视口小于576的时候：
当视口小于768的时候：
当视口小于992的时候：
当视口小于1200的时候：
当视口大于1200的时候
