判断是否为移动端

export function isMobile() {
  const userAgentInfo = navigator.userAgent
  const Agents = ['Android', 'iPhone',
    'SymbianOS', 'Windows Phone',
    'iPad', 'iPod']
  let flag = false
  for (let v = 0; v < Agents.length; v++) {
    if (userAgentInfo.indexOf(Agents[v]) > 0) {
      flag = true
      break
    }
  }
  return flag
}

改变element ui 全局样式

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

}

把下述代码写进媒体查询里

1. el-message

  .el-message {
    min-width: 300px !important;
  }
  .el-message-box {
    width: 300px !important;
  }

2. el-dialog

  .el-dialog__wrapper .el-dialog {
    top: 40%;
    transform: translateY(-60%);
    width: 300px !important;
    .el-dialog__body {
      padding: 10px 20px !important;
      .el-form-item__label {
        width: 68px !important;
      }
      .el-select,
      .el-input {
        max-width: 180px !important;
      }
    }
  }

3. el-radio

  .el-radio {
    width: 100%;
    text-overflow: ellipsis;
    white-space: normal;
  }

4. el-scrollbar

  //解决 element-ui 下拉框在ios上 点击两次才能选中
  .el-scrollbar {
    >.el-scrollbar__bar {
      opacity: 1 !important;
    }
  }

5. el-date-picker

  .el-date-range-picker .el-picker-panel__body {
    min-width: 100%;
  }
  .el-date-range-picker__content {
    width: 100% !important;
  }
  .el-date-range-picker {
    width: 100% !important;
  }

:editable="false"