vue移动端适配之lib-flexible

vue移动端适配之lib-flexible

lib-flexible插件,移动端适配解决方案。如果使用cube-ui来创建项目，则不需要lib-flexible适配，cube-ui里面自带了适配。--cube进行适配

第一部分：项目中引入lib-flexible

1. 安装

npm install lib-flexible --save

2. 引入lib-flexible

（在项目入口文件 main.js 里 引入 lib-flexible） import 'lib-flexible'

通过上面两步，就实现了vue项目使用lib-flexible来即将移动端适配

原理

lib-flexible自动在html的head中添加一个meta name="viewport"的标签，同时自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根节点的font-size。

例如：假如设计稿的宽度是750px，此时1rem应该等于75px。假如量的某个元素的宽度是300px，那么在css里面定义这个元素的宽度就是 width: 4rem

特别注意

检查一下html文件的head中，如果有 meta name="viewport"标签，需要将他注释掉，因为如果有这个标签的话，lib-flexible就会默认使用这个标签。而我们要使用lib-flexible自己生成的 meta name="viewport"来达到高清适配的效果。

第二部分：px转换成rem

如果每次从设计稿量出来的尺寸都手动去计算一下rem，就会导致我们效率比较慢，还有可能会计算错误，所以我们可以使用px2rem-loader自动将css中的px转成rem。使用px2rem-loader可以自动将css中的px转换成rem

1. 安装

npm install px2rem-loader --save-dev

2. 配置 注意：本项目使用的脚手架vue-cli是3.11.0版本的，vue-cli-3.X已经没有build的配置，如果需要配置webpack,需要在项目根目录下创建vue.config.js，在里面进行配置

创建vue.config.js

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('css')
        .test(/\.css$/)
        .oneOf('vue')
        .resourceQuery(/\?vue/)
        .use('px2rem')
          .loader('px2rem-loader')
          .options({
            remUnit: 75
          })
  }
}

3. 重启，即可