两种方法解决elementui的el-dialog 移动端中使用百分比显示问题，自适应（响应式）

❤️砥砺前行，不负余光，永远在路上❤️

前言

处理之后的效果：

一、借助css3的媒体查询

@media screen and (min-width: 220px) and (max-width:600px) {
  .el-dialog{
    width: 90% !important;
  }
}

几行css就搞定，不需要去动态的监听获取屏幕宽度啥的，来更改width，这里的意思就是当屏幕宽度小于600px并且大于220px的时候el-dialog设置为90%显示，如果仅仅需要小于某一个值的话用一个and就行，大于某一个值也是一样，改为min-width 即可。

@media screen and (max-width:600px) {
  .el-dialog{
    width: 90% !important;
  }
}

二、根据document.body.clientWidth设置width

<el-dialog title="新增" :visible.sync="dialogVisible" :width="width"></el-dialog>

initWidth() {
  const width = document.body.clientWidth;
  if (width < 600) {
    this.dialogWidth = "90%";
  } else {
    this.dialogWidth = "50%";
  }
},

在mounted中或者created中获取一下宽度给dialog赋值一下就行。

结语

个人感觉还是css3的media方便一点，方法很多，看自己咋个用吧