码迷,mamicode.com
首页 > 其他好文 > 详细

多屏显示

时间:2016-04-02 12:09:55      阅读:125      评论:0      收藏:0      [点我收藏+]

标签:

<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; } }

多屏显示

标签:

原文地址:http://www.cnblogs.com/jayruan/p/5347290.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!