响应式

<script>
  function init() {
    var width = document.documentElement.clientWidth
    document.documentElement.style.fontSize = width / 10 + 'px'
  }

  init()
  window.addEventListener('orientationchange', init)
  window.addEventListener('resize', init)
</script>

 <style>
        .parent {
            width: 100%;
            height: 600px;
        }

        .child {
            float: left;
            height: 100px;
        }

        @media screen and (max-width: 960px) {
            .child {
                width: 33.3%;
            }

            .child-1 {
                background-color: red;
            }

            .child-2 {
                background-color: green;
            }

            .child-3 {
                background-color: blue;
            }
        }

        @media screen and (max-width: 768px) {
            .child {
                width: 50%;
            }

            .child-1 {
                background-color: red;
            }

            .child-2 {
                background-color: green;
            }

            .child-3 {
                background-color: blue;
            }
        }

        @media screen and (max-width: 550px) {
            .child {
                width: 100%;
            }

            .child-1 {
                background-color: red;
            }

            .child-2 {
                background-color: green;
            }

            .child-3 {
                background-color: blue;
            }
        }
    </style>

    <style media="(min-width: 960px) and (max-width: 1080px)">
        .child {
            width: 25%;
        }

        .child-1 {
            background-color: red;
        }

        .child-2 {
            background-color: green;
        }

        .child-3 {
            background-color: blue;
        }
    </style>

    <link href="./rwd.css" rel="stylesheet" media="(min-width: 1081px) and (max-width: 1920px)" />

// 存在剩余空间时设置间距的方式
justify-content: ;