手淘的移动端适配方案flexible

基于 vue-cli 配置手淘的 lib-flexible + rem，实现移动端自适应

1. 安装 flexible

   npm install lib-flexible --save
   

2. 引入 flexible
   在项目入口文件 main.js 中添加如下代码，引入 flexible

   import 'lib-flexible'
   

3. px 转 rem
   使用 webpack 的 px2rem-loader, 自动将 px 转换为 rem

4. 安装 px2rem-loader

   npm install px2rem-loader --save-dev
   

5. 配置 px2rem-loader
   在 vue-cli 生成的文件中, 找到以下文件 build/utils.js, 如下添加配置

   const px2remLoader = {
   loader: 'px2rem-loader',
   options: {
         remUnit: 75  // 1rem=多少像素 这里的设计稿是750px。
       }
   }
   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
               })
             })
           }
       }
   

6. px2rem 用法

   安装 px2rem 后，再使用 px 上有些不同,下面简单介绍一下。
   直接写 px，编译后会直接转化成 rem ---- 除开下面两种情况，其他长度用这个
   在 px 后面添加/no/，不会转化 px，会原样输出。 --- 一般 border 需用这个
   在 px 后面添加/px/, 会根据 dpr 的不同，生成三套代码。---- 一般字体需用这个

   示例代码

   /** 编译前 **/
   .selector {
       width: 150px;
       height: 64px; /*px*/
       font-size: 28px; /*px*/
       border: 1px solid #ddd; /*no*/
   }
   /** 编译后（打包后的代码）**/
   .selector {
       width: 2rem;
       border: 1px solid #ddd;
   }
   [data-dpr="1"] .selector {
       height: 32px;
       font-size: 14px;
   }
   [data-dpr="2"] .selector {
       height: 64px;
       font-size: 28px;
   }
   [data-dpr="3"] .selector {
       height: 96px;
       font-size: 42px;
   }
   

   重启项目，就可以愉快的用设计稿上的 px 了。
   注意：
   不能在 index.html 的头部加 name 为 viewport 的 meta 标签，flexible 会自动为我们添加！