关于lib-flexible的使用填坑

什么是 lib-flexible

• 简介：一个制作H5适配的开源库，可以点击这里下载相关文件，获取需要的JavaScript和CSS文件。
• github地址：https://github.com/amfe/lib-flexible
• 阿里CDN地址：http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js

  使用方式

  1. 在Web页面的中添加对应的flexible_css.js,flexible.js文件：

  <script src="http://g.tbcdn.cn/mtb/lib-flexible/{{version}}/??flexible_css.js,flexible.js"></script>

将代码中的换成对应的版本号0.3.4

2.使用npm方式安装 (该使用方式可结合vue-cli进行配置)

• npm i lib-flexible --save
• 在项目入口文件main.js中引入lib-flexible

  import 'lib-flexible'
  

• 在项目根目录的index.html 头部加入手机端适配的meta的代码

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

• 使用PostCSS(px2rem) 使用npm install -g px2rem
  在build文件中的util.js中进行配置：

  exports.cssLoaders = function (options) {
  	 .....
  	 const cssLoader = {
    loader: 'css-loader',
    options: {
      minimize: process.env.NODE_ENV === 'production',
      sourceMap: options.sourceMap
    }
  }
  /*此处新增加px2remLoader*/
  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 75
    }
  }
     // generate loader string to be used with extract text plugin
  function generateLoaders (loader, loaderOptions) {
    const loaders = [cssLoader, px2remLoader] // 此处新增px2remLoader进loaders数组
  }

• 然后重启后 在组件中写单位直接写px 然后在浏览器中的检查就可以看到 单位是rem

赏

谢谢你请我吃糖果