CSS3 @media怎样控制div显示和隐藏

首先要引入媒体查询

<div class="box box1">
        <p>222p>
    div>
    <div class="box box2">
        <h2>我收h2h2>
    div>

.box{display:none;}
    @media (max-width:676px){
        .box1{
            width:500px;
            height:100px;
            background:aqua;
            display:block;
    }
}
        @media (min-width:676px) {
            .box2{
                width:200px;
                height:200px;
                background:tomato;
                display:block;
            }
        }