vue移动端配置flexible.js

1. 适配背景

针对vue移动端项目适配问题，手淘团队flexible.js个人觉得还是挺好用的。flexible.js适配方案采用rem布局，根据屏幕分辨率大小不同，调整根元素html的font-size，从而达到每个元素宽高自动变化，适配不同屏幕。

2.配置步骤

第一步：安装lib-flexible.js

css 复制代码

npm install lib-flexible --save

第二步：在项目入口文件main.js中引入lib-flexible

arduino 复制代码

import 'lib-flexible/flexible'

第三步：检查一下html文件的head，如果有meta name="viewport"标签，需要将他注释掉，需使用lib-flexible自己生成的meta name="viewport"来达到高清适配的效果

css 复制代码

<meta content=" width=device-width, initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover" />

通过以上，就完成了在vue项目使用lib-flexible来解决移动端适配了。
实现效果 ： lib-flexible会自动在html的head中添加一个meta name="viewport"的标签，同时会自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根节点的font-size。假如设计稿的宽度是750px，此时1rem应该等于75px。假如量的某个元素的宽度是150px，那么在css里面定义这个元素的宽度就是 width: 2rem。

3.延伸方法

由于每次都需根据设计稿量出来的尺寸去计算一下rem，降低效率，所以我们可以使用px2rem-loader自动将css中的px转成rem。

第一步：安装px2rem-loader

css 复制代码

npm install px2rem-loader --save-dev

第二步：配置px2rem-loader

php 复制代码

首先找到 build/utils.js文件，在utils.js中添加如下配置

const cssLoader = {
    loader: 'css-loader',
    options: {
      sourceMap: options.sourceMap,
      importLoader: 2, // 在css-loader前应用的loader的数目，默认为0 // 如果不加这个，@import的外部CSS文件将不能正常转换，如果还是不行可试着调大数字
    }
  }

  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      renUnit: 75
    }
  }

  // generate loader string to be used with extract text plugin
  function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]

    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

4.使用实例

安装px2rem后，再使用px上有些不同，大家可以参考px2rem官方介绍，下面简单介绍一下。在样式代码中尽量不要使用行内样式，根据设计稿直接使用px即可。

1、直接写px，编译后会直接转化成rem ---- 除开下面两种情况，其他长度用这个

2、在px后面添加/no/，不会转化px，会原样输出。 ---- 一般border需用这个

3、在px后面添加/px/,会根据dpr的不同，生成三套代码。---- 一般字体需用这个