响应式

• 根据屏幕大小自动缩放，改变布局。

flex+@media方案

body {
    max-width: 1920px;
    margin: 0;
    padding: 0;
}
.center{
    margin: 0 auto;
    min-width: 1080px;
}
@media screen and (min-width: 1536px) and (max-width: 1920px) {
    .center{
        width: 1440px;
    }
}
@media screen and (min-width: 1440px) and (max-width: 1535px) {
    .center{
        width: 1280px;
    }
}
@media screen and (min-width: 1360px) and (max-width: 1439px) {
    .center{
        width: 1200px;
    }
}
@media screen and (min-width: 1200px) and (max-width: 1359px) {
    .center{
        width: 1080px;
    }
}

注意事项

• body要设置最大宽度max-width。防止某些曲面屏超级长，width:100%样式非常丑。