postcss-torem和lib-flexible都是用于实现移动端自适应的工具，它们有什么区别呢？本文将对这两个工具进行详细的对比分析。

功能

postcss-torem主要是将CSS中以px为单位的值转换成rem单位，而rem单位可以根据html元素的font-size来计算出准确的像素值，从而实现页面布局的自适应。例如：

.container {
  width: 320px;
  height: 240px;
}

使用postcss-torem插件后可以将上述代码转换为：

.container {
  width: 2rem;
  height: 1.5rem;
}

这样在不同设备上浏览时，容器的宽度和高度会根据html元素的font-size自适应调整。

而lib-flexible则是一个用于实现手机端自适应布局的库。它可以根据设备的屏幕大小动态设置html元素的font-size，从而实现不同设备之间的自适应。同时，lib-flexible还提供了viewport缩放的功能，可以让开发者通过调整缩放比例来适配各种屏幕大小。另外，lib-flexible还支持rem单位的自动转换和精度控制，使得rem单位在各种设备上都能得到准确的显示。

使用方法

postcss-torem的使用非常简单，只需要在webpack构建工具中添加相应的loader即可。例如：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader']
      }
    ]
  },
  plugins: [
    require('postcss-import')(),
    require('postcss-torem')({
      rootValue: 75, // 设计稿宽度/10
      unitPrecision: 5,
      propList: ['*']
    }),
    require('autoprefixer')()
  ]
}

lib-flexible的使用方式也很简单，只需要在html中引入flexible.js库即可。例如：

<script src="https://cdn.bootcss.com/amfe-flexible/2.2.1/index.min.js"></script>

由于lib-flexible是基于JS实现的，因此它不依赖于任何构建工具，可以直接在项目中使用。

优缺点

postcss-torem的优点是易于使用，只需要在webpack配置文件中添加相应的loader就可以实现自适应，而且rem单位的转换是比较准确的。但它的缺点也比较明显，它只能将以px为单位的值转换成rem单位，对于其他单位无法处理，同时还需要设置根元素的font-size值。

lib-flexible的优点是使用灵活，可以动态计算设备的屏幕大小，并且支持多种自适应方案，例如viewport缩放、适配固定宽度的设计稿等。同时，它也支持rem单位的自动转换和精度控制。但它的缺点是基于JS实现，可能会对页面性能产生一定的影响。

总结

postcss-torem和lib-flexible都是非常好用的移动端自适应工具，它们既有相同之处，又有各自的优点和缺点。在使用时需要根据项目的实际情况选择适合的工具。如果只是简单的页面布局自适应，可以选择postcss-torem；如果需要实现更为复杂的自适应方案，例如viewport缩放等，可以选择lib-flexible。

postcss-torem和lib-flexible的对比

功能

使用方法

优缺点

总结