多屏显示

<div class="container">
<div class="box dark_blue"></div>
<div class="box light_blue"></div>
<div class="box green"></div>
<div class="box red"></div>
<div class="box orange"></div>
</div>

对应的 CSS ： .container { display: flex; flex-wrap: wrap; } .box { width: 100%; } @media screen and (min-width: 450px) { .light_blue, .green { width: 50%; } } @media screen and (min-width: 550px) { .dark_blue, .light_blue { width: 50%; } .green, .red, .orange { width: 33.33333%; } } @media screen and (min-width: 700px) { .container { width: 700px; margin-left: auto; margin-right: auto; } }