elementUI 组件兼容移动端(媒体查询)

最新推荐文章于 2024-07-24 10:16:07 发布

置顶 Jul-9

最新推荐文章于 2024-07-24 10:16:07 发布

阅读量3.5k

点赞数 1

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/LiangBlog/article/details/114527479

版权

前端专栏收录该内容

29 篇文章 0 订阅

订阅专栏

这段代码展示了如何使用CSS媒体查询@media来实现不同屏幕宽度下的元素尺寸调整。当屏幕宽度小于500px时，.el-message、.el-message-box和.el-dialog组件的宽度分别设置为300px，并相应地调整了内部元素的 padding、label宽度及输入框宽度，确保在小屏设备上的良好显示。

摘要由CSDN通过智能技术生成

@media screen and (max-width: 500px) {
  .el-message {
    min-width: 300px !important;
  }
}

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

@media screen and (max-width: 500px) {
  .el-dialog__wrapper .el-dialog {
    width: 300px !important;
    .el-dialog__body {
      padding: 10px 20px !important;
      .el-form-item__label {
        width: 68px !important;
      }
      .el-select,
      .el-input {
        width: 180px !important;
      }
    }
  }
}