VUE3:form表单根据屏幕适配宽度

找到styles下的index.scss文件添加下面一段代码

VUE3:form表单根据屏幕适配宽度_第1张图片

// 屏幕分辨率
@media (min-width : 1441px) {
  .app-container .content .form .el-form-item .el-form-item__content {
    width: calc(20vw - 124px)
  }
}

@media (min-width : 1201px) and (max-width : 1440px) {
  .app-container .content .form .el-form-item .el-form-item__content {
    width: calc(25vw - 124px)
  }
}

@media (max-width : 1200px) {
  .app-container .content .form .el-form-item .el-form-item__content {
    width: calc(33.33vw - 124px)
  }
}

.app-container .content .form这个是我的表单路径

VUE3:form表单根据屏幕适配宽度_第2张图片

改成自己的就行,记得index.scss需要格式化生效

你可能感兴趣的:(vue.js,前端,javascript)