页面自适应（media）

问题阐述

下面这个图片中的菜单，在不同分辨下，需要改变间距。

1.min-width这个值应该是屏幕可见的宽度

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .avue-top .el-menu-item {
      margin: 0 3px;
      padding: 0 35px;
      border-bottom: 1px solid white;

    i, span {
      height: 25px;
      color: white;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }

    i {
      top: -10%;
      font-size: 25px;
    }

    span {
      top: 30%;
      font-size: 12px;
    }
    }
} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 1500px) {
    .avue-top .el-menu-item {
      margin: 0 6px;
      padding: 0 40px;
      border-bottom: 1px solid white;

    i, span {
      height: 20px;
      color: white;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }

    i {
      top: -10%;
      font-size: 20px;
    }

    span {
      top: 30%;
      font-size: 10px;
    }
    }
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1800px) {
   .avue-top .el-menu-item {
      margin: 0 6px;
      padding: 0 50px;
      border-bottom: 1px solid white;

    i, span {
      height: 25px;
      color: white;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }

    i {
      top: -10%;
      font-size: 25px;
    }

    span {
      top: 30%;
      font-size: 12px;
    }
    }
}