element 手机适配_移动端常用适配（完美解决）

针对 Element UI，在移动端进行适配，可以使用以下几种方式：

1. 使用 Element UI 的移动端适配方案：Element UI 提供了一个移动端适配的方案，可以通过引入 `lib-flexible` 和 `px2rem-loader` 来实现。

// 安装 lib-flexible 和 px2rem-loader
npm install lib-flexible px2rem-loader --save-dev

在入口文件中引入 lib-flexible：

import 'lib-flexible'

然后在 webpack 配置中添加 px2rem-loader：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'px2rem-loader']
      },
      {
        test: /\.vue$/,
        use: ['vue-loader', 'px2rem-loader']
      }
    ]
  }
}

这样就可以使用 rem 单位进行布局，适应不同的移动设备屏幕。

2. 使用媒体查询和 vw 单位：可以使用媒体查询和 vw 单位来实现 Element UI 的移动端适配。

/* 在移动设备上，将根元素字体大小设置为 10px */
@media screen and (max-width: 767px) {
  html {
    font-size: 10px;
  }
}

/* 使用 vw 单位进行布局 */
.el-container {
  width: 100vw;
  height: 100vh;
  padding: 2vw;
}

/* 在需要的元素上使用媒体查询和 vw 单位 */
@media screen and (max-width: 767px) {
  .el-button {
    font-size: 3.2vw;
    padding: 1vw 3vw;
  }
}

3. 使用第三方库进行适配：还可以使用第三方库进行移动端适配，如 Amaze UI、Vant 等。这些库都提供了移动端适配的解决方案，可以根据实际需求选择使用。