详解vue.js移动端配置flexible.js及注意事项

介绍

随着移动端市场的扩大，越来越多的网站和应用开始关注移动端的适配问题。Vue.js作为一种前端开发的流行框架，也需要考虑移动端适配问题。本文将介绍如何在Vue.js中配置flexible.js实现移动端适配，以及在使用过程中需要注意的细节。

flexible.js介绍

flexible.js是淘宝移动端自适应解决方案中的一个组件。它通过修改元素的font-size属性来按照不同的设备像素比例计算出网页中元素的大小，从而实现了移动端的适配效果。

在Vue.js中使用flexible.js也十分方便，只需要在入口文件main.js中引入即可：

import 'lib-flexible'

在Vue.js中实现移动端适配

首先，我们需要在项目中安装postcss-px2rem和lib-flexible两个依赖：

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

然后在项目的根目录下创建一个postcss.config.js文件，并在其中添加如下代码：

module.exports = {
  plugins: {
    'postcss-px2rem': {
      remUnit: 37.5
    }
  }
}

这里的remUnit设置为37.5，是因为在750px的设计图中，1rem应该等于20px。而750/20=37.5，所以在这里设置为37.5。

接下来，在项目的main.js文件中引入lib-flexible：

import 'lib-flexible'

最后，在项目的vue.config.js文件中添加以下配置：

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-px2rem')({ remUnit: 37.5 }),
        ]
      }
    }
  }
}

这里的remUnit同样设置为37.5。

至此，我们已经成功地在Vue.js项目中配置了flexible.js移动端适配。

注意事项

1. 避免使用px

由于flexible.js会按照不同的设备像素比例计算出网页中元素的大小，因此我们在项目中不能再使用像素（px）作为单位，而应该使用rem或者em来替代。

2. 不要再使用viewport

在使用flexible.js的情况下，如果再使用viewport来设置viewport的宽度，那么就会导致flexible.js无法正确计算元素的font-size属性。因此，在使用flexible.js的情况下，应该避免再使用viewport。

---

示例1

我们来看一个例子，在某些移动设备上，像素比例为3，因此，在750px的设计稿中，一个元素的宽度应该是750/3=250px。根据我们上面的设置，如果我们在Vue.js组件的样式中使用width: 250px，那么实际上计算出来的宽度是2.5rem（250/100），即使在像素比例不为3的设备上也会有相同的效果。

示例2

有时候我们需要在Vue.js组件中使用内联样式（inline style），用px作为单位是比较方便的。不过在flexible.js的情况下，使用px会导致计算出来的大小不正确。我们可以通过一个库来解决这个问题，那就是postcss-pxtorem。

还是在vue.config.js中引入该库并做出如下配置：

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-pxtorem')({
            rootValue: 37.5,
            unitPrecision: 5,
            propList: ['*']
          })
        ]
      }
    }
  }
}

这里的rootValue设置为37.5，即1rem等于37.5px。

总结

在Vue.js中配置flexible.js非常简单，只需要几个步骤就可以实现移动端的适配效果。但是我们需要注意在样式中避免使用px，以及在使用flexible.js的情况下尽量避免使用viewport。同时，我们还可以使用postcss-pxtorem来解决一些使用内联样式时的问题。