px转rem2

postcss-pxtorem

能够自动将px代码转换成rem的postcss的一款插件

使用步骤：

1. 项目中安装它

npm install --save-dev postcss-pxtorem

2. 配置 postcss 。 项目根目录下创建一个 postcss.config.js 文件

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5, // 基准值 1rem = 37.5px
      propList: ['*']
    }
  }
}

3. 重新启动项目
4. 还需要让屏幕发生变化时，让html的fontSize大小跟着调整，这样才能让页面有变化。
   4.1 自己写媒体查询
   4.2 使用一段js代码 (flexible)

在pulic中创建文件夹lib再创建文件flexible.js

(function flexible (window, document) {
  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1

  // adjust body font size
  function setBodyFontSize () {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 10
  function setRemUnit () {
        //这是设置html跟字体大小统一单位最大宽度
    var rem = docEl.clientWidth >= 750 ? 75 : docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }

  setRemUnit()

  // reset rem unit on page resize
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })

  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement('body')
    var testElement = document.createElement('div')
    testElement.style.border = '.5px solid transparent'
    fakeBody.appendChild(testElement)
    docEl.appendChild(fakeBody)
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines')
    }
    docEl.removeChild(fakeBody)
  }
}(window, document))

最后在index.html中引入