vue px转换为rem

在开发中可以直接使用设计图的尺寸开发，项目为我们自动编译，转换成rem。

注意：适配对于浏览器视口小的友好，视口大的话，也许一个轮播图就占据 2 屏了

vue-cli：使用脚手架工具创建项目。

适配方法1

postcss-pxtorem：转换 px 为 rem 的插件。

1. 创建 rem.js 文件

// 基准大小
const baseSize = 32
// 设置 rem 函数
function setRem () {
  // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。（简单的说 750 是设计稿的宽度）
  const scale = document.documentElement.clientWidth / 750
  // 设置页面根节点字体大小
  document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem()
}

2. 在 main.js 中引入 rem.js

import './utils/rem' // 引入时，需要注意路径

3. 安装 postcss-pxtorem

npm install postcss-pxtorem -D

4. 修改根目录 .postcssrc.js 文件，找到 plugins 属性新增pxtorem的设置

"postcss-pxtorem": {
  "rootValue": 32,
  "propList": ["*"]
}

注意：此方法支持 import 和 .vue 单文件中 style。暂不支持 style 中使用 @import url();

适配方法2

1. 下载lib-flexible

npm install lib-flexible --save

2. 在 main.js 中引入 lib-flexible

import 'lib-flexible/flexible'

3. 在 index.html 添加 meta 标签

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

4. 安装 px2rem-loader，使用flexible插件时，会自动把px转换成rem单位

npm install px2rem-loader

5. 在 build 文件夹中找到 util.js ，将 px2rem-loader 添加到 cssLoaders 中

  const cssLoader = {
    loader: 'css-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }
  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      //一般设置75
      remUnit: 75
    }
  }

我们只需要在 cssLoader 后面加上一个 px2remLoader 即可，px2rem-loader 的 remUnit 选项意思是 1rem=多少像素，结合 lib-flexible，我们将 px2remLoader 的 option.remUnit 设置成设计稿宽度的1/10，这里我们假设设计稿的宽度为750px，那么 px2remLoader 中的 remUnit 的值为75

6. 在 generateLoaders 方法中添加 px2remLoader

  // generate loader string to be used with extract text plugin
  function generateLoaders(loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
    // 这里不管真假，都增加了 px2remLoader

    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        publicPath: '../../',
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

适配方法3

1. 假如设计图宽度是 750

!(function (doc, win) {
  // 拿到html标签的dom元素对象
  var docEle = doc.documentElement,
    evt = "onorientationchange" in window ? "orientationchange" : "resize",
    fn = function () {
      // 拿到当前屏幕的尺寸。
      var width = docEle.clientWidth;
      width = width < 320 ? 320 : width;
      width = width > 640 ? 640 : width;
      width && (docEle.style.fontSize = 100 * (width / 750) + "px");
 
      setTimeout(function() {
        var width = docEle.clientWidth;
        width = width < 320 ? 320 : width;
        width = width > 640 ? 640 : width;
        width && (docEle.style.fontSize = 100 * (width / 750) + "px");
      }, 300);
    };
 
  win.addEventListener(evt, fn, false);//监听横屏
  doc.addEventListener("DOMContentLoaded", fn, false);

2. 引入 js 文件，在 scss 或 less 文件中长度单位直接使用 rem。比如 height: 200/100rem;