不难懂------适配移动端flexible

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

安装 flexible
```
npm install lib-flexible --save
```
引入 flexible
在项目入口文件 main.js 中添加如下代码，引入 flexible
```
import 'lib-flexible'
```
px 转 rem
使用 webpack 的 px2rem-loader, 自动将 px 转换为 rem
安装 px2rem-loader
```
npm install px2rem-loader --save-dev
```

配置 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
            })
          })
        }
    }

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 会自动为我们添加！

本文版权归作者和博客园共有，欢迎转载。但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接，否则保留追究法律责任的权利！

作者：刘呵呵

QQ：352887191

出处：http://www.cnblogs.com/liuyishi/

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

安装 flexible
```
npm install lib-flexible --save
```
引入 flexible
在项目入口文件 main.js 中添加如下代码，引入 flexible
```
import 'lib-flexible'
```
px 转 rem
使用 webpack 的 px2rem-loader, 自动将 px 转换为 rem
安装 px2rem-loader
```
npm install px2rem-loader --save-dev
```

配置 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
            })
          })
        }
    }

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 会自动为我们添加！

来源：https://www.cnblogs.com/yebai/p/11328149.html

标签

flexible

移动互联网终端

font-size