目录

 

 

基本概念

关键代码

---

 

基本概念

这里是用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
  }
}