vuejs学习之路 为了app、apk测试包下载，做的单个页面兼容移动端浏览器（十二）

       好久没更新了，更新一波，哈哈。最近在做一个需求：在平台上下载测试包。平时平台都是在pc端使用，看着很简单的需求，然而做起来开始头大。感谢前端大佬以及老乡的支持。（ps：这个功能从前端、后端、数据库、服务部署都是我完成的，有疑问的可以私聊。）

背景：使用了vuejs+element-manager框架。这个框架是设定好了header和侧边框的。

尝试方法：

一、整个页面测试包下载页面左移；因为header和侧边框并不在这个template里边（失败）；

二、使用移动端兼容框架； 百度试了几个，没有成功（失败）

三、此时的我是有点绝望的，好吧，小白感觉去问一下前端大佬，基于前端小姐姐的提示，我仿佛得救了:

四、百度了详细做法， 页面小的时候，果然就自然缩放了也，但是边框还是在的。

@media only screen and (max-width: 500px) {
}

五、使用元素定位，将定位到的边框元素都在style里边用css 的display：none 给隐藏掉，边框颜色变成白色；

<style>
  @media only screen and (max-width: 500px) {
    .ul {
      display: none;
    }

    .sidebar-el-menu {
      display: none;
    }

    .header {
      display: none;
    }

    .tags {
      display: none;
    }

    .tags-li {
      display: none;
    }

    .tags-close-box {
      display: none;
    }
  }

</style>

七、咦，界面怎么是变形的？ 在使用元素定位的时候，发现了这个，我仿佛又看见了希望：

八、证据一：全局搜索wrapper，找到了main.css文件； 证据二： 在home.vue文件中，同时包含侧边栏和header元素。离真相不远了。

/* 适配 501px 以上宽度的设备 */
@media only screen and (min-width: 501px) {
  /* PC 端，需要 absolute 定位 */
  .wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .content-box {
    position: absolute;
    left: 250px;
    right: 0;
    top: 70px;
    bottom: 0;
    padding-bottom: 30px;
    -webkit-transition: left .3s ease-in-out;
    transition: left .3s ease-in-out;
    background: #f0f0f0;
  }
}

/* 适配 500px 以下宽度的设备 */
@media only screen and (max-width: 500px) {
  /* 移动端，不需要定位 */
  .wrapper {
    width: 100%;
    height: 100%;
  }

  .content-box {
    /*padding-bottom: 30px;*/
    background-color: #f0f0f0;
    -webkit-transition: left .3s ease-in-out;
    transition: left .3s ease-in-out;
  }
}