在使用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="三部分&#