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單位。