vue 移动端适配 ,px自动转换rem

1.在命令行安装

 

npm i lib-flexible --save

 

2.引入lib-flexible(在main.js内引入)

import 'lib-flexible'

3.添加meta标签(在项目跟目录index.html中添加)

 

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

 

4.安装px2rem-loader

 

cnpm install px2rem-loader 

 

5. 在build下的 utils.js中，找到generateLoaders 方法，在这里添加

 

var px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 64//设计稿宽度/10  或75
    }
  };
  function generateLoaders(loader, loaderOptions) {

　　　var loaders2 = [cssLoader, px2remLoader];

　　　　　　if (loader) {

　　　　　　　　loaders2.push({

　　　　　　　　　　loader: loader + '-loader',

　　　　　　　　　　options: Object.assign({}, loaderOptions, {

　　　　　　　　　　　　sourceMap: options.sourceMap

　　　　　　　　　　　})

　　　　　　　　　})

　　　　　　　　}

　　　　}

 

设计搞一般为750px, 所以remUnit:为75,在写项目时,可以直接写px值,会自动转换为rem.

不打算转换原始值:

font-size:26px /* no*/ px不转成rem

font-size:26px px转成rem