【CSS】根据页面宽度显示指定div

in 默认分类 with 0 comment

【CSS】根据页面宽度显示指定div

缘由

在写Bing壁纸的网页的样式的时候想顺手把手机的页面也一并做了,当然做在同一个html页面里面咯,确实不想写2个页面。

第一时间想到的就是Bootstrap、MDL等优秀的前段框架了~他们提供了比较简便且效果很高的解决方案。只不过要引入他们的资源到网页中也要不少的大小,而且只用到这一个功能感觉有点杀鸡用牛刀,大材小用了。(其实可以把相关资源用公共CDN的资源,不仅下载速度快而且还不占用VPS的空间)

于是乎就上网找了找方法,做一个简单的笔记

解决方法

首先可以肯定的是能通过JS来实现啦,不过这挺麻烦的。有没有什么办法可以不用编写逻辑代码来实现呢?

带着这个问题继续搜索发现还真的有,只通过CSS就可以实现了,如下代码

.header-phone-root-div{
    display: none;
    position: fixed;
    bottom: 0;
    z-index: 9999999;
    background-color: white;
    box-shadow: gray 0 0 6px;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    padding-bottom: 0;
}

@media (max-width: 767px) {
    .header-phone-root-div{
        display:flex;
        position: fixed;
        bottom: 0;
        z-index: 9999999;
        background-color: white;
        box-shadow: gray 0 0 6px;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        width: 100%;
        padding-bottom: 3px;
    }

}

如上图的CSS

header-phone-root-div的宽度小于767px时,将会套用下面的CSS,否则就套用上面的CSS,效果如下图

当宽度大于767px时

1

当宽度小于767px时

2

效果还可以~