自适应布局postcss-px2rem

1. 实现原理

自适应布局是前端一直都存在的问题，通常常用的技术有媒体查询@media screen and (max-width:1366px)，还有rem布局，通过改变页面根元素font-size大小来实现自适应布局。可是都逃不过要计算的命运。有没有什么方法绕过这些花花绕，就写px也能实现自适应布局呢？答案是肯定的，有方案理论上就能实现，这样一来无论是写自适应项目，还是修改原有项目，都变得十分方便。下面看看webpack打包scss的过程：

首先浏览器是无法解析scss代码的，在项目工程里，通过webpack的loader将文件打包成浏览器可执行的代码。比如scss，首先加载到scss、sass文件时，就会通过sass-loader打包成css，然后在通过css-loader打包，具体配置代码如下：

{
  test: /\.scss|sass$/,
  use: ["style-loader", "css-loader", "sass-loader"]
}

通过这个可以想到，如果有一个loader，能够在这些css文件打包前，将文件里面的px计算成rem，然后在进行解析，这样就可以直接在页面中使用px了。主角出场了postcss-px2rem，可实现这个功能，下面看看在vue中的具体配置

2. 代码分析（这段无需配置）

使用webpack新建vue项目时，已经安装好了这个loader，在build文件夹下utils（配置loader的地方）面有这样一段代码

return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less').concat({
      loader: 'sass-resources-loader',
      options: {
        resources: path.resolve(__dirname, '../src/assets/styles/global.less')
      }
    }),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }

在generateLoaders函数中有这样一句usePostCSS

const postcssLoader = {
   loader: 'postcss-loader',
   options: {
     sourceMap: options.sourceMap
   }
 }
const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]

然后在通过styleLoaders 构造rules格式的loader，所以我们只要把webpack.dev.conf.js跟webpack.prod.conf.js文件中使用styleLoaders函数的参数加一个usePostCSS：true就可以（默认就有）

exports.styleLoaders = function (options) {
  const output = []
  const loaders = exports.cssLoaders(options)

  for (const extension in loaders) {
    const loader = loaders[extension]
    output.push({
      test: new RegExp('\\.' + extension + '$'),
      use: loader
    })
  }

  return output
}

3. 配置文件（报错的话记得安装postcss-px2rem），在vue-loader.conf.js配置一下，vue-loader转换

module.exports = {
  //使用px-rem转换
  postcss: [require('postcss-px2rem')({remUnit: 100})],
}

4. 最后一步，监听窗口大小变化，动态设置font-size，定义一个js文件引入main.js中

// baseSize 要跟vueloade配置的一样
let baseSize = 100

function setFontSize () {
  // 设计稿 1920
  let scale = document.documentElement.clientWidth / 1920
  // 设置页面根节点字体大小，最高放大比例为2）
  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setFontSize()

// 监听窗口变化
window.onresize = function () {
  setFontSize()
}

注意：①不能将大小直接写在vue文件的style中
②无需转换rem可以写Px或者PX