使用媒体查询（@media）

使用媒体查询可以根据用户不同分辨率展示不同的样式（即可实现不同的布局方式），从而达到响应式布局

@media screen and (max-width: 1920px) {
    body {
        background: red;
    }
}

@media screen and (max-width: 1600px) {
    body {
        background: blue;
    }
}

@media screen and (max-width: 1440px) {
    body {
        background: green;
    }
}

@media screen and (max-width: 960px) {
    body {
        background: yellow;
    }
}