H5基于vue-cli配置flexible自适应

引用自 —— 基于vue-cli配置移动端自适应

配置flexible

npm i lib-flexible --save

引入及添加

//main.js
import 'lib-flexible'

<!--index.html-->
<!--

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

-->

<meta>元素的“viewport”不引入，因为flexible对iphone的retina屏会做出算法判断，dpr为2和为3时会有不同的缩放。

上面将缩放规定为1，那flexible将会显得毫无意义。

安装px2rem-loader

npm i px2rem-loader --save-dev　

配置

// utils.js
var cssLoader = {
  loader: 'css-loader',
  options: {
    minimize: process.env.NODE_ENV === 'production',
    sourceMap: options.sourceMap
  }
}
var px2remLoader = {
  loader: 'px2rem-loader',
  options: {
    remUnit: 75
  }
}
// ...


// utils.js
function generateLoaders(loader, loaderOptions) {
  var loaders = [cssLoader, px2remLoader]
// ...

之后在组件中直接通过设计稿来写px单位。