elment-ui部分ui组件在移动端也能实现自适应

javascript 好久没更新了 ,来更新一下自己的笔记

最近有移动端的项目迁移到pc端,pc端那一套用的是element-ui的后台框架,所以难免有一些样式不兼容的问题,之前很久的时候也处理过这些,但是很久没处理忘了==,所以之后再遇到兼容的会更新到这篇笔记上,供之后翻阅

1. el-dialog

借助css3的媒体查询

javascript 复制代码
@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
    即可。

根据document.body.clientWidth设置width

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

2: el-button

这个我直接用的是layout布局,手写div整上去的,

代码如下:

复制代码
    <el-row :gutter="20">
      <el-col :span="12" :offset="6">
        <div @click="closeRiskPopup" :class="{color_str: btnisShow}" class="grid-content bg-purple controlClass">
          {{ btnText }}
        </div>
      </el-col>
    </el-row>

style样式

javascript 复制代码
.bg-purple {
  background: #ff8f04;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  line-height: 36px;
}
.controlClass {
  font-size: 15px;
  font-family: PingFangSC-Medium-, PingFangSC-Medium;
  font-weight: normal;
  text-align: center;
  border-radius:15px;
  cursor: pointer;
}
.color_str{
     background-color: #dddddd;
  }

3:message-box

  • 在移动端显示弹框一直在顶部的问题:(一句代码搞定)

// messageBox的弹框手机样式

javascript 复制代码
  @media screen and (max-width: 750px) {
    .el-message-box {
      width: 80% !important;
    }
  }

目前遇到这三个,之后遇到多更新

相关推荐
小梦白2 小时前
RPG59.玩家拾取物品三:可拾取物品的提示UI
ui·ue5
迷曳16 小时前
24、鸿蒙Harmony Next开发:不依赖UI组件的全局自定义弹出框 (openCustomDialog)
dialog·前端·ui·harmonyos·鸿蒙
R-G-B18 小时前
【27】MFC入门到精通——MFC 修改用户界面登录IP IP Address Control
tcp/ip·ui·mfc·mfc 用户界面登录·mfc ip登录·mfc address登录
布兰妮甜20 小时前
Adobe Photoshop:数字图像处理的终极工具指南
图像处理·ui·adobe·photoshop
orange_の_呜1 天前
Adobe illustrator、klayout绘制光刻图及其尺寸映射
ui·adobe·illustrator
共享ui设计和前端开发1 天前
数字孪生技术引领UI前端设计新高度:跨平台数据一致性的可视化
ui
簪花走马过长安3 天前
【PDF识别改名】使用京东云OCR完成PDF图片识别改名,根据PDF图片内容批量改名详细步骤和解决方案
ui·pdf·ocr·excel·京东云·wps·图片区域识别重命名
枯萎穿心攻击3 天前
响应式编程入门教程第三节:ReactiveCommand 与 UI 交互
开发语言·ui·unity·架构·c#·游戏引擎·交互
SEO-狼术4 天前
DevExtreme Complete Crack,responsive UI widgets
ui
ui设计前端开发老司机4 天前
从数据洞察到设计创新:UI前端如何利用数字孪生提升产品交互体验?
前端·ui·交互