对element ui MessageBox弹框优化兼容移动端

MessageBox弹框兼容移动端的问题

问题原因

在上图中可以看到.el-message-box这个样式被定死为420px,因此会发生弹框位置不准确在移动端

解决方案

可以利用媒体查询@media实现在宽度小于750px一下，宽度可以使用百分比布局

@media screen and (max-width: 750px) {
  .el-message-box {
    width: 60% !important;
  }
}

呈现效果