目录

 

 

基本概念

关键代码

---

 

基本概念

这里是用css来搞的，本人的开发环境为Vue cli

IDE为 webStorm。

这里使用

这个 @media screen and (XXXXXX)老浏览器是不支持的！！！

当分辨率小了就会调用这个代码

隐藏某div或者nav可以使用

visibility hidden或者 opacity 0 这些操作都是很骚气的

这个还是很有用的。

 

关键代码

程序结构如下：

代码如下：

html, body{
    XXXXX
}

body{
  background-image url("../images/bg2.png")
}

.top {
    XXXXX
}

.middleContent {
    XXXXX
}

.bottom {
    XXXXX
}

/*导航页*/
.leftNav {
    XXXXX
}
.rightContent {
    XXXXX
}


@media screen and (max-height:800px){

  body{

        XXXXX
  }

  .bottom{
    visibility:hidden
  }
}

@media screen and (max-width:800px){

  body{

    background-image url("../images/bg.gif")
  }

  .leftNav {
    float: left;
    width: 0px;
    opacity 0
  }

  .rightContent {
    margin-left: 0px;
  }

  .bottom{
    visibility:hidden
  }
}