postcss-pxtorem postcss-px-to-viewport

1.postcss-pxtorem

将css中px转换为rem，同时（rem.js）监听window窗口变化改变html下根元素字体大小，从而适应窗口变化

步骤：

1.npm install postcss-pxtorem --save

2.创建文件postcss.config.js

// postcss.config.js
module.exports = {
    'plugins': {
      // to edit target browsers: use "browserslist" field in package.json
      'autoprefixer': {},
      'postcss-pxtorem': {
        rootValue: 16, // 结果为：设计稿元素尺寸/16，比如元素宽320px,最终页面会换算成 20rem
        propList: ['*']
      }
    }
  }

3.新建rem.js

// 设置 rem 函数
function setRem() {
    // 1920 默认大小16px; 1920px = 120rem ;每个元素px基础上/16
    const screenWidth = 1920
    const scale = screenWidth / 16
    const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth
    // 得到html的Dom元素
    const htmlDom = document.getElementsByTagName('html')[0]
    // 设置根元素字体大小
    htmlDom.style.fontSize = htmlWidth / scale + 'px'
  }
  // 初始化
  setRem()
  // 改变窗口大小时重新设置 rem
  window.onresize = function() {
    setRem()
  }

4.在main.js里引入rem.js

2.postcss-px-to-viewport

npm install，css样式style中的px就会被转成vw vh