vue px转换为rem

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

注意：适配对于浏览器视口小的友好，视口大的话，也许一个轮播图就占据 2 屏了
PC端不要用第二种方法

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": ["*"],
      "selectorBlackList": [".el-"],// 忽略的选择器   .el-  表示 .el- 开头的都不会转换
    }

注意：此方法支持 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 标签

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

npm install px2rem-loader --save

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

  const cssLoader = {
    loader: 'css-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }
  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      //设计图是750px
      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

cnpm install postcss-pxtorem -D

1. 假如设计图宽度是 750

let docEl = document.documentElement
getSize () { // 获取屏幕的宽度
  function getWdith () {
    let myWidth = 0
    if (typeof (window.innerWidth) === 'number') {
      // Non-IE
      myWidth = window.innerWidth
    } else if (document.documentElement && (document.documentElement.clientWidth)) {
      // IE 6+ in 'standards compliant mode'
      myWidth = document.documentElement.clientWidth
    } else if (document.body && (document.body.clientWidth)) {
      // IE 4 compatible
      myWidth = document.body.clientWidth
    }
    return parseInt(myWidth)
  }
  let screenWidth = window.screen.width > getWdith() ? getWdith() : window.screen.width

  if (screenWidth >= 768) {
    screenWidth = 768
  }
  docEl.style.fontSize = screenWidth / (750 / 40) + 'px'
  window.document.addEventListener('focusout', function () {
    window.scrollTo()
  })
  if (!window.ISALES) {
    window.ISALES = {
      ready: function () {}
    }
  } else {
    if (!window.ISALES.ready) {
      window.ISALES.ready = function () {}
    } else {
      if (typeof window.ISALES.ready === 'function') {
        let fn = window.ISALES.ready
        window.ISALES.ready = function () {
          fn()
        }
      } else {
        window.ISALES.ready = function () {}
      }
    }
  }
}

// 页面适配
getSize()
window.addEventListener('resize', () => {
  getSize()
})

2. 引入 js 文件，在css中直接写设计图中的大小（单位px），getSize()会自动改为rem
3. vue-cli 3.X 4.X 排除对某样式的转换
   package.json 中与 devDependencies 同级 添加：

  "postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-pxtorem": {
        "rootValue": 40,
        "replace": true,
        "propWhiteList": [
          "*"
        ],
        "minPixelValue": 2,  // 意思是所有小于2px的样式都不被转换
        "selectorBlackList": [
          "mint-"
        ] // 对css选择器进行过滤的数组，class以mint-开头不被转换
      }
    }
  },

4. 使用的时候，设计稿多少 PX， 就写多少 PX

适配方法4（不推荐）

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;