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的时候：

媒体查询策略_scala

当视口小于768的时候：

媒体查询策略_html_02

当视口小于992的时候：

媒体查询策略_scala_03

当视口小于1200的时候：

媒体查询策略_scala_04

当视口大于1200的时候

媒体查询策略_scala_05