在使用dialog的时候，或多或少会遇到一个问题：当浏览器被缩放到最小的时候，dialog被挤变形啦，里面的内容如果是固定宽高的话，会变得额外的丑陋。怎样结合vue来改变这一现象呢？思路如下：
浏览器的缩放，我们是无法控制的，但是我们可以改变的是我们的网页内容。
1、给定一个最小宽度，当浏览器缩放到某一程度的时候，我们的内容就不在支持缩放的效果了。
即：min-width 设置成一个固定的值
2、改变el-col中的: span 的值，总的为24，我们在浏览器缩放到最小的时候将这一个值换成24，最大化显示。
即：dialog最小时，el -col要用最大的，保证视觉效果最佳。
3、结合自定义的css使用
@media screen and (max-width: 780px) {
.el-dialog--small{
width: 380px !important;
}
}
@media screen and (min-width: 990px) {
.el-dialog--small{
width: 700px !important;
}
}注意区间的问题，使用min是表示 >该值，max 表示< 该值。
案例如下：
<el-col :span="24">
<el-col :span="testspan">
<el-form-item label="三部分" prop="">
<el-input v-model="" @change=""></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<span class="seqnum-desc">xxxxx</span>
</el-col>
</el-col>data部分设计：
data() {
return {
screenWidth: document.body.clientWidth, //设置的监听屏幕的变化
testspan: 12, //监听media带来的页面缩放的问题，使其值改为：24
｝
｝逻辑处理部分：
watch: {
screenWidth (val) {
if(val < 990){
this.testspan = 24;
}else{
this.testspan = 12;
}
}
},
mounted () {
const that = this
window.onresize = () => {
return (() => {
window.screenWidth = document.body.clientWidth
that.screenWidth = window.screenWidth
})()
}
},/*media dialog*/
.el-select {
width: 100%;
}
@media screen and (max-width: 780px) {
.el-dialog--small{
width: 380px !important;
}
}
@media screen and (max-width: 990px) {
.seqnum-desc{
display: none;
}
}
@media screen and (min-width: 990px) {
.el-dialog--small{
width: 700px !important;
}
}