手淘的移动端适配方案flexible

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