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

最新推荐文章于 2024-03-24 00:10:39 发布

youjinli122

最新推荐文章于 2024-03-24 00:10:39 发布

阅读量3.3k

点赞数 1

分类专栏： css 文章标签： css3 媒体查询 media

本文链接：https://blog.csdn.net/youjinli122/article/details/78062101

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

首先要引入媒体查询

<div class="box box1">
        <p>222</p>
    </div>
    <div class="box box2">
        <h2>我收h2</h2>
    </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;
            }
        }