elementui移动端适配-flexble.js和px2rem-loader

Posted 2020-12-22 vera-7c

版本：vue-cli@3（3一下版本的配置方法是不一样的）

配置下来没有什么坑，完成配置重启服务， 这个时候F12控制台可以看到px已经转换为了rem，然后就可以自己调整样式了。

1.安装

npm install lib-flexible --save
npm install px2rem-loader --save-dev

2.配置

在main.js中引入flexible.js

import ‘lib-flexible/flexible.js‘

在 @vue/cli-service/lib/config/css.js下添加规则（module.exports）

rule
  .use(‘px2rem-loader‘)
  .loader(‘px2rem-loader‘)
  .options({emUnit:75})

！检查同文件夹下的index.js文件，将<meta name="viewport">标签删除。因为我们要使用lib-flexible自己生成的meta name标签来达到高清适配的效果。

之后重启服务就完成了适配，接下来再自己稍作调整。

此时：

px后面添加/*no*/，就不会转化为rem。一般border需要。

px后面添加/*px*/，会根据dpr的不同生成三套代码。一般字体需要。

.box {
  font-size：14px;/*px*/
  border: 1px;/*no*/
}

（1）html的font-size根据屏幕宽度除以10计算，所以需要设置页面最大宽度是10rem（？）

（2）px2rem-loader自动将css中的px转换为rem，嵌入样式需要自己手动调整（elementui侧边栏width我手动改成了rem）

（3）不支持ipad（清晰度？）

--save，简写-S，安装包信息写入dependencies中（生产阶段的依赖，即项目运行时的依赖）

--save-dev，简写-D，安装包会写入devDependencies中（开发阶段的依赖，只在开发阶段起作用）

举例：

你写 ES6 代码，需要 babel 转换成 es5 ，转换完成后，我们只需要转换后的代码，上线的时候，直接把转换后的代码部署到生产环境，不需要 bebal 了，生产环境不需要。这就可以安装到 devDependencies ，再比如说代码提示工具，也可以安装到 devDependencies 。

如果你用了 Element-UI，由于发布到生产后还是依赖 Element-UI，这就可以安装到 dependencies 。

感谢：https://blog.csdn.net/u011320715/article/details/96978840